简单的模态不会显示
[英]Simple Modal Won't Show
问题描述
I know this is probably a really simple, dumb issue, but I've searched around and can't seem to figure out what my problem is. 
我知道这可能是一个非常简单，愚蠢的问题，但是我四处搜寻，似乎无法弄清楚我的问题是什么。 I copied and pasted the example straight from the bootstrap website, and I can't get a modal to pop up on the screen no matter what I do. 我直接从bootstrap网站复制并粘贴了示例，无论如何我都无法在屏幕上弹出模式。
Codepen at https://codepen.io/anon/pen/Pdrvoa https://codepen.io/anon/pen/Pdrvoa上的 Codepen
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test Webpage</title> <link href='bootstrap.min.css' rel='stylesheet' type='text/css' /> <script href='bootstrap.min.js' type='text/javascript'></script> </head> <body> <div class='container'> <div class='row'> <div class='col-md-12'> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2018-09-25 20:25:05
Your problem is the references of bootstrap. 您的问题是引导程序的引用。 Look at that example. 看那个例子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test Webpage</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class='container'> <div class='row'> <div class='col-md-12'> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html>
解决方案2
0 2018-09-25 20:31:35
I would check the location of your JS/CSS files. 我会检查您的JS / CSS文件的位置。 Looks like a funky path you have in there; 看起来像是一条时髦的路。 make sure you're pointing to the right folder or using an up-to-date cdn (the examples on their website use cdns I believe). 确保您指向正确的文件夹或使用最新的CDN（我相信其网站上的示例使用CDN）。
Just for reference, you can use https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css for the stylesheet and https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js for the javascript. 仅供参考，您可以将https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css用于样式表，并将https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/ javascript的js / bootstrap.min.js 。 Also make sure you have a jQuery reference in there ( https://code.jquery.com/ ) as this is needed for much of bootstrap's javascript functionality. 还要确保您在其中有一个jQuery参考（ https://code.jquery.com/ ），因为许多Bootstrap的javascript功能都需要此参考。
Note: Be sure to add the reference to jQuery BEFORE the reference to boostrap.js! 注意：确保在对boostrap.js的引用之前添加对jQuery的引用！
EDIT 编辑
I see Leo Rossetti just beat me to it, use his example as it appears to work. 我看到Leo Rossetti击败了我，以他的榜样似乎有效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.