The bootstrap modal is failing to appear when the action is triggered

I have implemented a modal in my tutorial project using the bootstrap modal class. However, when I click on the "Add Post" button, nothing happens and I am unable to identify the issue. I have included $("[data-toggle='modal']").modal(); in my script as well.

If anyone has any insights into what might be causing the problem, please feel free to suggest a solution.

Here is a snippet of my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>

    <!-- HEADER -->
    ...

    <!-- ACTIONS -->
    ...
      
      <a href="#" class="btn btn-primary btn-block"data-toggle="modal"data-target="#addPostModal"><i class="fas fa-plus"></i> Add Post</a>
    
    ...

    <!-- MODALS -->

    <!-- ADD POST MODAL -->
    ...


      <div class="modal fade" id="addPostModal">
        ...
        <button class="btn btn-primary" data-dismiss="modal">Save Changes</button>
        ...
      </div>
   
    ...

    <!-- FOOTER -->
   ...

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    ...
    <script>
      $("#year").text(new Date().getFullYear());
      $("[data-toggle='modal']").modal();
      CKEDITOR.replace("editor1");
    </script>
  </body>
</html>

htmlcssbootstrap-4bootstrap-modal

Answer №1

To optimize your code, remove one of the duplicate scripts you have included and delete the line 

$("[data-toggle='modal']").modal();
from your JavaScript. You can also test this solution on JSFiddle

<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  crossorigin="anonymous"
></script>

Answer №2

 <!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Blogen</title>
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
  integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
  crossorigin="anonymous"
/>
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <header id="main-header" class="py-2 bg-primary text-white">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1><i class="fas fa-cog"></i> Dashboard</h1>
      </div>
    </div>
  </div>
</header>

<!-- ACTIONS -->
<section id="actions" class="py-4 mb-4 bg-light">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <a
          href="#"
          class="btn btn-primary btn-block"
          data-toggle="modal"
          data-target="#addPostModal"
        >
          <i class="fas fa-plus"></i> Add Post
        </a>
      </div>

    </div>
  </div>
</section>

<!-- MODALS -->

<!-- ADD POST MODAL -->
<div class="modal fade" id="addPostModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">Add Post</h5>
        <button class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="title">Title</label>
            <input type="text" class="form-control" />
          </div>
          <div class="form-group">
            <label for="category">Category</label>
            <select class="form-control">
              <option value="">Web Development</option>
              <option value="">Tech Gadgets</option>
              <option value="">Business</option>
              <option value="">Health & Wellness</option>
            </select>
          </div>
          <div class="form-group">
            <label for="image">Upload Image</label>
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="image" />
              <label for="image" class="custom-file-label"
                >Choose File</label
              >
            </div>
            <small class="form-text text-muted">Max Size 3mb</small>
          </div>
          <div class="form-group">
            <label for="body">Body</label>
            <textarea name="editor1" class="form-control"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">
          Save Changes
        </button>
      </div>
    </div>
  </div>
</div>

<!-- FOOTER -->
<footer id="main-footer" class="bg-dark text-white mt-5 p-5">
  <div class="container">
    <div class="row">
      <div class="col">
        <p class="lead text-center">
          Copyright &amp;copy;
          <span id="year"></span>
          Blogen
        </p>
      </div>
    </div>
  </div>
</footer>

<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
  crossorigin="anonymous"
></script>
<script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>

<script>
  //get the current year of copyright
  $("#year").text(new Date().getFullYear());

  //$("[data-toggle='modal']").modal();

  CKEDITOR.replace("editor1");
</script>
</body>
</html>

Answer №3

Check out the demo 

// Retrieve the current year for copyright
//$("#year").text(new Date().getFullYear());
//$("[data-toggle='modal']").modal();

CKEDITOR.replace("editor1");
$("#year").replaceWith(new Date().getFullYear());
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Blogen</title>
  
  <!-- Additional Scripts -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <!-- Link to Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
  
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
   
   <!-- Custom Styling -->
   <link rel="stylesheet" href="css/style.css" />

    <!-- Start of Header Section-->
  <header id="main-header" class="py-2 bg-primary text-white">
      <!-- Content here -->
  </header>
  
  <!-- Actions Section-->
  <section id="actions" class="py-4 mb-4 bg-light">
    <!-- Content here -->
  </section>
  
  <!-- Modals Section-->
  
  <!-- Add Post Modal-->
  <div class="modal fade" id="addPostModal">
    <!-- Content here -->
  </div>
  
    <!-- Footer Section -->
  <footer id="main-footer" class="bg-dark text-white mt-5 p-5">
     <!-- Content here -->
  </footer>
  
  <!-- Additional Scripts -->
  <script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>

    <script>
     // Additional Scripting Goes Here
    </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different ways to display a PHP value that has been passed to an Ajax call within a radio button

I am facing an issue with my PHP code and Ajax script. I have a list of values being passed from the PHP code to the Ajax script, but the gender value is not being checked in the radio button. Here is an example of the passed values: {"name":"Okay","age": ...

javascriptjqueryajaxhtml

What is the best way to adjust the minimum width of the HTML5 progress element?

There is a similar question which addresses input elements having a minimum width determined by the size parameter. I am attempting to create a layout with an inline-flex element with a flex-direction: column property like this: .item { border: 1px s ...

htmlcssflexbox

Stack pictures on a slender DIV

I am trying to create a vertical line inside a DIV container. After that, I want to add an image on top of the vertical line (see attached picture for reference). This is what my current source code looks like: <div style="background-color:gray;width ...

htmlcss

Having issues with the right margin in HTML5 canvas and struggling to remove the scroll bar

I am struggling with adjusting the margins of my canvas to ensure equal spacing on both sides without any horizontal scroll bars. Desired Outcome: Equal margin on both sides of canvas without any horizontal scroll bars. Issue: The margin-right property i ...

javascriptcsshtmlcanvas

Maintaining Scene Integrity in THREE.JS: Tips for Handling Window Resizing

My layout includes a div with a scene that looks great initially; however, as soon as I start moving or resizing the window, the scene overflows the boundaries of the div and goes haywire, almost filling the entire window. Are there any techniques or solu ...

javascripthtmlcssthree.js

Separate choices with delineating lines, conceal when picked

input { position: absolute; left: -9999px; } input + label { border-right: solid 1px #000; padding-right: 8px; margin-right: 8px; } input:checked + label { display: none; } <input type="radio" id="one" name="option" checked/> <label ...

htmlcss

Generating an html hyperlink for downloading and installing a provisioning profile

I have a download link for an app that is configured to only work on specific devices for testing purposes. The app downloads and installs without any issues, but it seems that the necessary certificate required to run the app is not being installed due to ...

htmliosxcodeprovisioning-profile

Determine the dynamic height of content in a TypeScript file

Could you please provide guidance on obtaining the height of the content within this particular div element? For example, I need to calculate the dynamic height of the content. https://i.sstatic.net/2kNk3.png code .html <div class="margin-top-4 ...

htmlcssangulartypescriptionic-framework

What is the best way to show a loading spinner as my Next image component loads, especially when there is an existing image already being displayed?

I'm trying to incorporate a loading spinner or any other HTML element while an image is being loaded. Currently, I am utilizing the ImageComponent to showcase images in a random movie generator. Although I managed to make the spinner work for the init ...

htmlreactjsnext.js

When utilizing ES6, my HTML elements do not have event listeners re-attached to them unless I refresh the page

So, I have a task where I am displaying a simple string on the screen. The goal is that when you click on any letter in the string, it should be removed from its current position and added to the end of the string. However, after clicking on a letter and u ...

javascripthtmlfunctionecmascript-6event-listener

Setting up Node.js

I'm currently in the process of configuring my Node.js to execute my HTML code. I have Bootstrap and Express Js set up as well. However, when I launch Node.js, it doesn't seem to be loading the CSS properly. Can someone provide insight into what ...

htmlnode.jstwitter-bootstrapexpress

JavaScript is having trouble with the custom attribute (data-) in HTML and it is not functioning

I created a select bar with multiple options to help me sort items, and I also wanted to add a feature where clicking the option again switches between ascending and descending order. Here is the HTML code snippet: <select name="theme" id="sortSelec ...

javascripthtml

When utilizing scoped slots in BootstrapVue, you may encounter an error stating "Property or method 'data' is not defined."

Greetings! I am currently in the process of learning how to utilize BootstrapVue, and I decided to reference an example from the official BootstrapVue documentation. <template> <div> <b-table :fields="fields" :items="items" foot-clone ...

htmlvue.jsvue-componentbootstrap-vue

Issues with Forms Affecting my Footer

One of the best methods to understand this issue is to view it live. The footer on the homepage looks great at www.fishingreports.com. However, there seems to be a problem with the footer at www.fishingreports.com/users/register. Whenever I copy the cod ...

htmlcssfooter

Encountering an 'undefined' error while attempting to showcase predefined JSON data on an HTML webpage

As I try to display the predefined JSON data from https://www.reddit.com/r/science.json on an HTML page, I keep encountering the message "undefined." Below is a snippet of my HTML code: $.getJSON('https://www.reddit.com/r/science.json', funct ...

javascripthtmljson

Saving the data of a variable to a text file

I've developed a simple system to capture a person's First and Last name (this is the basic code, of course). But I'm interested in outputting the value of a variable to a text file. I've tried using some php, but it doesn't seem t ...

javascriptphphtmlvariablesstorage

Do you believe that using bower to install HTML5Boilerplate is a beneficial decision?

Is it recommended to use HTML5 Boilerplate with Bower for installation? What steps should one take afterwards, considering that it has its own directory structure for CSS and JavaScript, leading everything to be contained under bower_components/html5boil ...

htmlnpmbowerhtml5boilerplate

Ways to display only text within an INPUT element in HTML

Is there a way to only display text inside an INPUT element? <p><input type="image" src="" border="0" name="submit" alt="Donate"></p> Although it works well, Safari and Chrome do not show the alt="Donate", instead displaying an empty sq ...

htmlcss

What is the most effective method for preserving RichText (WYSIWYG output)?

I am currently using a JavaScript-based rich text editor in my application. Could you suggest the most secure method to store the generated tags? My database is MySQL, and I have concerns about the safety of using mysql_real_escape_string($text);. ...

phpjavascripthtml

Adding and deleting an item

Currently in the process of developing a web page using javascript, html and css. The page is dedicated to seat booking functionality where users can select and deselect seats. Successfully implemented the feature that displays the ID of the seat when sele ...

javascriptjqueryhtml