堆栈内存溢出
  简体   繁体   English

为什么我的模态不起作用？ 引导程序4

[英]Why does my modal not work? Bootstrap4

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

问题描述

I wonder why my Bootstrap 4 modal is not working.我想知道为什么我的 Bootstrap 4 模式不起作用。 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.我真的从 Bootstrap 4 网站 ( http://v4-alpha.getbootstrap.com/components/modal/#live-demo ) 复制和粘贴了另外，我添加了他们说的 js。

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 个解决方案

解决方案1
 10 已采纳  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.最后），但最重要的是您的切换按钮针对错误的模态 ID。 Make sure data-target is the id of the modal you're targeting:确保data-target是您定位的模态的 ID：

<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:编辑：根据@OlavT 请求更新 Bootstrap 4-beta： 

 $('#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>

解决方案2
 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您有一些脚本错误，并且您的data-target="#exampleModal"与模型的 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>

解决方案3
 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.如果您正在使用我们编译的 JavaScript，请不要忘记在它之前包含 jQuery 和 Popper.js 的 CDN 版本。

Because I downloaded bootstrap 4 and copied the folders as I used to with bootstrap v3, I assumed it was all going to work.因为我下载了 bootstrap 4 并像以前使用 bootstrap v3 一样复制了文件夹，所以我认为这一切都会起作用。

Download section has the CDN for popper and jQuery下载部分包含 popper 和 jQuery 的 CDN

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

hope this helps... Nessio希望这有助于... Nessio

解决方案4
 0  2017-02-24 11:54:18

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

解决方案5
 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>

解决方案6
 0  2017-02-24 12:17:42

your data target is wrong: #exampleModal , should be #myModal .您的数据目标是错误的： #exampleModal ，应该是#myModal 。

also, you have incorrect syntax in your js code此外，您的 js 代码中的语法不正确

$(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>

解决方案7
 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 .我在使用thymeleaf layout不小心将modal div放在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 ).因此，尽管代码中存在modal div ，但它并未在DOM上呈现（使用View Page Source进行检查）。 It fails silently without any errors/warnings.它无声无息地失败，没有任何错误/警告。 Please ensure that the modal div is rendered on the DOM .请确保modal div呈现在DOM 。

解决方案8
 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. https://stackoverflow.com/a/49039205/9855327就我而言，它与错误的引用 ID 无关，这是因为我在 C#/Aspnet MVC 的循环中在表内创建了一个模态。 Se I created a modal for each table row. Se 我为每个表格行创建了一个模态。

I just inserted the code below at the end body tag:我只是在 end body 标签中插入了下面的代码：

<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.它会将所有模态 HTML 元素移动到正文的开头，对我来说就足够了。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么 Bootstrap4 模态没有在我的 Django 模板中显示数据？ - Why Bootstrap4 modal doesn't show data in my Django Template? Angular 中的 Bootstrap4 模态 - Bootstrap4 Modal in Angular Bootstrap4：导航栏切换按钮不起作用 - Bootstrap4: NavBar toggle button does not work 为什么我的引导模式弹出窗口没有关闭？ - Why does my bootstrap modal popup not close? Bootstrap modal无法与我的Ajax代码一起正常工作 - Bootstrap modal does not work correctly with my ajax code 为什么专注于输入框和选项不适用于bootstrap模式？ - why focus on input box and options does not work with bootstrap modal? 为什么我的Bootstrap JavaScript无法正常工作？ - why does my Bootstrap javascript not work? 为什么我的 Bootstrap 弹出框不起作用？ - Why does my Bootstrap popover not work? 为什么我的模态不起作用 - Why will my modal not work 为什么我的 Bootstrap-Modal 不能动态加载？ - Why does my Bootstrap-Modal not load Dynamically?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM