单击 Bootstrap 弹出窗口无任何操作

Question

我需要在点击 link 时实现一个弹出窗口 window。我的 HTML 代码片段：

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

单击 header 的 'Add Card' 按钮，我想显示一个弹出窗口，用户可以在其中输入一些标题和说明并提交。但是这个示例模态甚至没有打开。有什么建议吗？谢谢

Answer 1

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

因此更改此行

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

Answer 2

遵循这个模式。你的样式 sheet 应该总是在你的 JS script.It 之上是一个很好的做法，也是将样式 sheet 放在 head 部分的正确方法。您的 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">

单击 Bootstrap 弹出窗口无任何操作

No action clicking on Bootstrap popup

javascript

jquery

onclick

popupwindow

twitter-bootstrap