Question

我需要在点击一个链接时实现一个弹出窗口。我的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>

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

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

遵循这种模式。您的样式表应始终位于JS脚本之上。这是一种很好的做法，也是在样式表中放置样式表的正确方法。您的Jquery核心文件应该始终是第一个要加载的JS文件，因为调用了Page，它绑定了所有其他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弹出窗口

2 个答案: