点击 Bootstrap 弹出窗口无操作答案

【问题标题】：No action clicking on Bootstrap popup点击 Bootstrap 弹出窗口无操作
【发布时间】：2015-04-29 07:19:50
【问题描述】：

我需要在单击一个链接时实现一个弹出窗口。我的 HTML 代码 sn-p：

<head>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script type="text/javascript" src="/stylesheets/script.js"></script>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
     <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

     <link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' />
     <link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' />
     <link rel='stylesheet' href='/stylesheets/bootstrap.css' />
     <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
</head>

  <body style="overflow-x:hidden">
<!--Header--> 
 <div id = "header">
  <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/kanbannew">Welcome</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
      <li><a href="#" data-toggle="modal" data-target="#myModal" data-whatever="Add Card">Add Card</a></li>
      <li><a href="KanbanprojectStatus">Project Status</a></li>
      <li><a href="index">Logout</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

 <div id="myModal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 <script>
  $('#myModal').on('show.bs.modal', function (event) {
  var li = $(event.relatedTarget) // Button that triggered the modal
 var recipient = li.data('whatever') // Extract info from data-* attributes
 var modal = $(this)
 modal.find('.modal-title').text(recipient)
  })
  </script>
</body>

点击标题的“添加卡片”按钮，我想显示一个弹出窗口，用户可以在其中输入一些标题和描述并提交相同的内容。但是这个示例模式甚至没有打开。有什么建议吗？谢谢。

【问题讨论】：

我没有看到你的引导 css 文件
添加了，还是不行。

标签： javascript jquery twitter-bootstrap onclick popupwindow

【解决方案1】：

您的data-target="#myModal" 指的是应该有id='myModal' 的<div>

因此改变这一行

<div class="modal fade">

到

<div id="myModal" class="modal fade">

它应该可以工作。

注意：您缺少 bootstrap.css 文件。

更新：

你应该先加载jQuery。删除您的scripts 和links 并以这种方式加载它：

 <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
 <link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' />
 <link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">   
 </script>
 <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
 <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">  
 </script>
 <script type="text/javascript" src="/stylesheets/script.js"></script>

【讨论】：

我试过了，但它仍然不起作用用 id="myModel" 更新了问题。谢谢。
@凯蒂。我测试了你的代码bootply.com/new，它工作正常。控制台有错误吗？
是的，它在 bootply.com 中也适用于我。我无法确定为什么它不能在我的本地工作。我在控制台中看不到任何错误。您能否告诉我我使用的 css、js 和 jQuery 是否足以使模态工作？还是我错过了什么？谢谢。
@凯蒂。我想我现在看到了问题。您在jquery 之前加载bootstrap.min.js。而且你加载jQuery 的次数太多了。只有一个就足够了。我会更新我的答案。
我想通了，因为我同时拥有 bootstarp.js 和 bootstrap.min.js。我删除了 bootstrap.js，它现在可以正常工作了。谢谢你的帮助。

【解决方案2】：

遵循这个模式。您的样式表应该始终位于您的 JS 脚本之上。将样式表放在头部是一个很好的做法和正确的方法。您的 Jquery 核心文件应该始终是第一个加载的 JS 文件，因为调用绑定了所有其余 JS 文件的页面。以类似的模式尝试这些文件并暂时删除所有其他头文件。点击这里例如http://www.bootply.com/Zdq6rSSvUs

 <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

【讨论】：

我按照 Sourabh 的说法进行了尝试，它奏效了。感谢您的评论。