簡單的模態不會顯示
[英]Simple Modal Won't Show
問題描述
我知道這可能是一個非常簡單，愚蠢的問題，但是我四處搜尋，似乎無法弄清楚我的問題是什么。 我直接從bootstrap網站復制並粘貼了示例，無論如何我都無法在屏幕上彈出模式。
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
您的問題是引導程序的引用。 看那個例子。
<!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
我會檢查您的JS / CSS文件的位置。 看起來像是一條時髦的路。 確保您指向正確的文件夾或使用最新的CDN（我相信其網站上的示例使用CDN）。
僅供參考，您可以將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 。 還要確保您在其中有一個jQuery參考（ https://code.jquery.com/ ），因為許多Bootstrap的javascript功能都需要此參考。
注意：確保在對boostrap.js的引用之前添加對jQuery的引用！
編輯
我看到Leo Rossetti擊敗了我，以他的榜樣似乎有效。
簡單模態不會在點擊時顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.