stackoom
  简体   繁体   中英

Why does my modal not work? Bootstrap4

 原文  2017-02-24 11:51:39  0   8    javascript/ jquery/ html/ twitter-bootstrap

Question

I wonder why my Bootstrap 4 modal is not working. Any clue? I literally copy and paste from the Bootstrap 4 website ( http://v4-alpha.getbootstrap.com/components/modal/#live-demo ) Also, I have added js that they say.

Please find below the code.

Thanks

I have checked other posts and I didn't have luck

 $('#myModal').on('shown.bs.modal', function() { $('#myInput').focus() })
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta content="Description" name="description"> <meta content="index,follow" name="robots"> <link href="/images/myicon.png" rel="icon" type="image/png"> <title>TITLE HERE</title> <!--CSS--> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> <!--Bootstrap CSS JS--> <!--fonts--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <!--CB-modal --> <!-- Button trigger modal --> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> <!-- JS code --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"> </script> <!--JS below--> <!--modal--> <script> $(document).ready(function() { $("#MyModal").modal(); }); }) </script> </html>

8 answers

solution1
 10 ACCPTED  2017-02-24 11:57:25

There are typo in your snippet (unused }); at the end), but most importantly your toggle button is targeting the wrong modal id. Make sure data-target is the id of the modal you're targeting:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Demo: 

 $('#myModal').on('shown.bs.modal', function() { $('#myInput').focus() })
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <!--CB-modal --> <!-- Button trigger modal --> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- JS code --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"> </script> <!--JS below--> <!--modal--> <script> $(document).ready(function() { $("#myModal").modal(); }); </script> </html>

Edit : Updated Bootstrap 4-beta as per @OlavT request: 

 $('#myModal').on('shown.bs.modal', function() { $('#myInput').focus() })
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <!--CB-modal --> <!-- Button trigger modal --> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- JS code --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <!--JS below--> <!--modal--> <script> $(document).ready(function() { $("#myModal").modal(); }); </script> </html>

solution2
 1  2017-02-24 11:58:43

You have some script error and your data-target="#exampleModal" does not match with the model's ID

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta content="Description" name="description"> <meta content="index,follow" name="robots"> <link href="/images/myicon.png" rel="icon" type="image/png"> <title>TITLE HERE</title> <!--CSS--> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> <!--Bootstrap CSS JS--> <!--fonts--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <!--CB-modal --> <!-- Button trigger modal --> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> <!-- JS code --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"> </script> <!--JS below--> <!--modal--> <script> $(document).ready(function() { $("#MyModal").modal(); $('#myModal').on('shown.bs.modal', function() { $('#myInput').focus(); }); }); </script> </html>

solution3
 1  2017-08-29 04:02:44

I landed here because I was having the same error. After going back and reading a bit. I ran into the following:

If you're using our compiled JavaScript, don't forget to include CDN versions of jQuery and Popper.js before it.

Because I downloaded bootstrap 4 and copied the folders as I used to with bootstrap v3, I assumed it was all going to work.

Download section has the CDN for popper and jQuery

https://getbootstrap.com/docs/4.0/getting-started/download/

hope this helps... Nessio

solution4
 0  2017-02-24 11:54:18

<script>
  $(document).ready(function() {
     $("#MyModal").modal();
     $('#myModal').on('shown.bs.modal', function() {
        $('#myInput').focus();
     });
  });
</script>

solution5
 0  2017-02-24 12:02:35

Looks like the data-target name you entered in not correct. Here is the correct code of your button

     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

solution6
 0  2017-02-24 12:17:42

your data target is wrong: #exampleModal , should be #myModal .

also, you have incorrect syntax in your js code

$(document).ready(function() {
  $("#MyModal").modal();
  });
  })//remove this


 $('#myModal').on('shown.bs.modal', function() { $('#myInput').focus() });
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta content="Description" name="description"> <meta content="index,follow" name="robots"> <link href="/images/myicon.png" rel="icon" type="image/png"> <title>TITLE HERE</title> <!--CSS--> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> <!--Bootstrap CSS JS--> <!--fonts--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <!--CB-modal --> <!-- Button trigger modal --> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> <!-- JS code --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"> </script> <!--JS below--> <!--modal--> <script> $(document).ready(function() { $("#MyModal").modal(); }); </script> </html>

solution7
 0  2020-07-30 05:53:48

I faced the same error but for a different reason(...rather silly). I was using thymeleaf layout and accidentally put the modal div outside the content fragment .

<div layout:fragment="content">
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#someId">Open</button>
...
</div>
<div class="modal" id="someId">
</div>

So, although the modal div was present in the code, it was not rendered on the DOM (checked with View Page Source ). It fails silently without any errors/warnings. Please ensure that the modal div is rendered on the DOM .

solution8
 0  2020-10-10 13:36:29

My issue was exactly explained here. https://stackoverflow.com/a/49039205/9855327 In my case, it is not related with wrong references id, it was because I created a modal inside a table in a loop in C# / Aspnet MVC. Se I created a modal for each table row.

I just inserted the code below at the end body tag:

<script>
jQuery(document).ready(function () {
   jQuery("body").children().first().before($(".modal"));
});
</script>

It will move all modals HTML elements to the beginning of the body and for me was enough.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Why Bootstrap4 modal doesn't show data in my Django Template? Bootstrap4 Modal in Angular Bootstrap4: NavBar toggle button does not work Why does my bootstrap modal popup not close? Bootstrap modal does not work correctly with my ajax code why focus on input box and options does not work with bootstrap modal? why does my Bootstrap javascript not work? Why does my Bootstrap popover not work? Why will my modal not work Why does my Bootstrap-Modal not load Dynamically?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM