Bootstrap 模态不会在点击时打开答案

【问题标题】：Bootstrap Modal won't open on clickBootstrap 模态不会在点击时打开
【发布时间】：2017-02-01 11:54:57
【问题描述】：

我试图在按钮单击时简单地打开一个模式。当我单击淡入淡出动画开始然后几乎立即停止时，当我双击按钮时它有时会起作用。我相信通过阅读我的头部部分的链接或脚本有问题，但我不确定。

这里是头部：

<!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>

这是正文中的模态代码：

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

任何帮助将不胜感激！

EDIT* - 输出到控制台（为格式化道歉）

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

【问题讨论】：

在浏览器中显示控制台输出
您好，请在 Firefox 的控制台输出中找到所有选项卡。
请仅过滤 js 输出
只有javascript输出时没有输出

标签： javascript jquery html twitter-bootstrap bootstrap-modal

【解决方案1】：

希望你能通过下面的例子。

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

【讨论】：

最好解释一下为什么此代码有效而 OP 无效。