[英]Bootstrap Modal won't open on click
I am trying to simply open a modal on button click. 我试图在按钮单击上简单地打开一个模式。 When I click the fade animation begins then stops almost immediately, when I double click the button it will sometimes work. 当我单击淡入淡出动画时,然后几乎立即停止,当我双击该按钮时,它有时会起作用。 I believe from reading around there is something wrong with my links or scripts in the head section but I am not sure. 我相信从阅读的内容来看,我的开头部分的链接或脚本有问题,但我不确定。
Here is the head section: 这是头部:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DSA - Wine & Vineyards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="jquery/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
And here is the modal code in the body: 这是主体中的模态代码:
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Check weather</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<p>Some Text</p>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated! 任何帮助将不胜感激!
EDIT* - Output to the console ( apologies for the formatting ) 编辑*-输出到控制台(对不起,格式化)
Unknown pseudo-class or pseudo-element '-webkit-inner-spin-button'.
Ruleset ignored due to bad selector. bootstrap.min.css:5:1544 Unknown
pseudo-class or pseudo-element '-webkit-search-cancel-button'.
Ruleset ignored due to bad selector. bootstrap.min.css:5:1778 Unknown
property 'orphans'. Declaration dropped. bootstrap.min.css:5:2691
Unknown property 'widows'. Declaration dropped.
bootstrap.min.css:5:2700 Unknown property '-moz-osx-font-smoothing'.
Declaration dropped. bootstrap.min.css:5:3676 Expected colour but
found 'auto'. Expected colour but found '-webkit-focus-ring-color'.
Expected end of value but found '-webkit-focus-ring-color'. Error in
parsing value for 'outline'. Declaration dropped.
bootstrap.min.css:5:15689 Error in parsing value for 'margin-top'.
Declaration dropped. bootstrap.min.css:5:35720 Expected colour but
found 'auto'. Expected colour but found '-webkit-focus-ring-color'.
Expected end of value but found '-webkit-focus-ring-color'. Error in
parsing value for 'outline'. Declaration dropped.
bootstrap.min.css:5:35947 Unknown pseudo-class or pseudo-element
'-ms-input-placeholder'. Ruleset ignored due to bad selector.
bootstrap.min.css:5:36878 Unknown pseudo-class or pseudo-element
'-webkit-input-placeholder'. Ruleset ignored due to bad selector.
bootstrap.min.css:5:36926 Unknown pseudo-class or pseudo-element
'-ms-expand'. Ruleset ignored due to bad selector.
bootstrap.min.css:5:36978 Expected media feature name but found
'-webkit-min-device-pixel-ratio'. bootstrap.min.css:5:37312 Error in
parsing value for 'margin-top'. Declaration dropped.
bootstrap.min.css:5:38425 Unknown property 'touch-action'.
Declaration dropped. bootstrap.min.css:5:45363 Unknown property
'user-select'. Declaration dropped. bootstrap.min.css:5:45471
Expected colour but found 'auto'. Expected colour but found
'-webkit-focus-ring-color'. Expected end of value but found
'-webkit-focus-ring-color'. Error in parsing value for 'outline'.
Declaration dropped. bootstrap.min.css:5:45652 Expected 'none', URL,
or filter function but found 'alpha('. Error in parsing value for
'filter'. Declaration dropped. bootstrap.min.css:5:45998 Expected
colour but found 'solid\9 '. Expected end of value but found 'solid\9
'. Error in parsing value for 'border-top'. Declaration dropped.
bootstrap.min.css:5:54924 Expected 'none', URL, or filter function but
found 'progid'. Error in parsing value for 'filter'. Declaration
dropped. bootstrap.min.css:5:56291 Expected colour but found 'solid\9
'. Expected end of value but found 'solid\9 '. Error in parsing
value for 'border-bottom'. Declaration dropped.
bootstrap.min.css:5:56836 Error in parsing value for
'background-image'. Declaration dropped. bootstrap.min.css:5:85027
Error in parsing value for 'background-image'. Declaration dropped.
bootstrap.min.css:5:85213 Error in parsing value for
'background-image'. Declaration dropped. bootstrap.min.css:5:85932
Error in parsing value for 'background-image'. Declaration dropped.
bootstrap.min.css:5:86118 Error in parsing value for
'background-image'. Declaration dropped. bootstrap.min.css:5:86558
Error in parsing value for 'background-image'. Declaration dropped.
bootstrap.min.css:5:86744 Error in parsing value for
'background-image'. Declaration dropped. bootstrap.min.css:5:87190
Error in parsing value for 'background-image'. Declaration dropped.
bootstrap.min.css:5:87376 Error in parsing value for
'background-image'. Declaration dropped. bootstrap.min.css:5:87820
Error in parsing value for 'background-image'. Declaration dropped.
bootstrap.min.css:5:88006 Unknown property 'zoom'. Declaration
dropped. bootstrap.min.css:5:88442 Expected 'none', URL, or filter
function but found 'alpha('. Error in parsing value for 'filter'.
Declaration dropped. bootstrap.min.css:5:105685 Expected 'none', URL,
or filter function but found 'alpha('. Error in parsing value for
'filter'. Declaration dropped. bootstrap.min.css:5:105794 Expected
'none', URL, or filter function but found 'alpha('. Error in parsing
value for 'filter'. Declaration dropped. bootstrap.min.css:5:107003
Expected 'none', URL, or filter function but found 'alpha('. Error in
parsing value for 'filter'. Declaration dropped.
bootstrap.min.css:5:107056 Expected 'none', URL, or filter function
but found 'alpha('. Error in parsing value for 'filter'. Declaration
dropped. bootstrap.min.css:5:108206 Unknown property 'line-break'.
Declaration dropped. bootstrap.min.css:5:108243 Expected 'none', URL,
or filter function but found 'alpha('. Error in parsing value for
'filter'. Declaration dropped. bootstrap.min.css:5:108268 Unknown
property 'line-break'. Declaration dropped.
bootstrap.min.css:5:110250 Expected media feature name but found
'transform-3d'. bootstrap.min.css:5:112088 Expected media feature name
but found '-webkit-transform-3d'. bootstrap.min.css:5:112103 Expected
'none', URL, or filter function but found 'alpha('. Error in parsing
value for 'filter'. Declaration dropped. bootstrap.min.css:5:113425
Error in parsing value for 'background-image'. Declaration dropped.
bootstrap.min.css:5:113494 Error in parsing value for
'background-image'. Declaration dropped. bootstrap.min.css:5:113581
Error in parsing value for 'background-image'. Declaration dropped.
bootstrap.min.css:5:113663 Expected 'none', URL, or filter function
but found 'progid'. Error in parsing value for 'filter'. Declaration
dropped. bootstrap.min.css:5:113840 Error in parsing value for
'background-image'. Declaration dropped. bootstrap.min.css:5:114037
Error in parsing value for 'background-image'. Declaration dropped.
bootstrap.min.css:5:114124 Error in parsing value for
'background-image'. Declaration dropped. bootstrap.min.css:5:114206
Expected 'none', URL, or filter function but found 'progid'. Error in
parsing value for 'filter'. Declaration dropped.
bootstrap.min.css:5:114383 Expected 'none', URL, or filter function
but found 'alpha('. Error in parsing value for 'filter'. Declaration
dropped. bootstrap.min.css:5:114608 Expected colour but found '#\30
00\9 '. Error in parsing value for 'background-color'. Declaration
dropped. bootstrap.min.css:5:115557
Hope you can go through the example below. 希望您可以通过下面的示例。
button{ cursor:pointer; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> </body> </html>
https://jsbin.com/powaqacuve/edit?html,css,output https://jsbin.com/powaqacuve/edit?html,css,output
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.