stackoom
  简体   繁体   中英

Bootstrap Modal won't open on click

 原文  2017-02-01 11:54:57  5   1    javascript/ jquery/ html/ twitter-bootstrap/ bootstrap-modal

Question

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">&times;</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

1 answers

solution1
 0  2017-02-01 12:16:44

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">&times;</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

暂无
暂无

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 Django Bootstrap link won't open modal Bootstrap modal won't close on click Bootstrap modal won't open on page load Bootstrap 4 Modal Will Not Open on Click Modal won't open Bootstrap modal window won't open because of interference with other elements Bootstrap Modal Won't Open After Form Submit Bootstrap 4 modal won't close Bootstrap 5 modal won't dismiss Bootstrap Modal won't display
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM