Question

我最近开始在我正在处理的网站上摆弄Bootstrap模式，它们似乎根本不会出现在我的网站上。我阅读了其他一些帖子并尝试了他们所说的尝试，但都没有奏效。 Here's the site itself唯一有效的模态是启动演示模式按钮，所以试试那个

这是我的<head>部分：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.ico">

    <title>#OnlyAtLSA</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
          $(function(){
             $("#button").click(function(){
                $('#modal').modal('show');
             });
          });
        </script>
    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="assets/css/cover.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="/assets/css/ie-emulation-modes-warning.js"></script>

    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />

  </head>

这是我的触发按钮：
<button type="button" class="btn btn-primary btn-xlarge" data-toggle="modal" data-target="#mission"> Launch demo modal </button>

这是我的模态本身：

 <!-- Our Mission -->
  <div class="modal fade" id="mission" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Our Mission</h4>
        </div>
        <div class="modal-body">
          <p>The Legal Studies Academy is welcome to all students who have a deep interest in and curiosity about the law, law-related fields, and legal and ethical issues. The First Colonial Legal Studies Academy functions as a school-within-a-school to offer students the opportunity to not only embrace an academic curriculum that will fully prepare them for post-secondary education, but will also allow career exploration within the area of legal studies. Students enrolled in the Legal Studies Academy will receive a solid foundation in core subjects as well as practice and experience in a work-site learning component.<br>

          The Academy curriculum goes beyond the basic four-year high school requirement by infusing law-related units into the core subject areas of English, science, and social studies and by providing students with specialized coursework. The program of studies is extended through seminars and field trips on law-related subjects. In addition, they Academy offers students the opportunity to experience the reality of law careers by emphasizing active learning in criminal investigations and Mock Trials in our courtroom.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- End of Our Mission -->

有人看错了吗？

Answer 1

如果您不介意使用bootstrap js CDN，那么它可能是最简单的选择：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

这会将所有引导程序JS功能加载到您的站点中。如果你愿意的话，它也可以更容易地使用其他引导JS。

否则，您可以在本地下载文件，并像服务bootstrap css一样提供服务。

然后，我会围绕这段代码构建 http://getbootstrap.com/javascript/#live-demo 我认为这是您获得当前代码的地方。

Bootstrap模式在站点中没有正确显示

1 个答案: