Question

我不了解javascript，我对此非常陌生。我试图在页面加载中添加一个bootstrap模式，但它不适合我。这是我得到的代码：

＆＃13;

<head>
  <script src="http://code.jquery.com/jquery.js"></script>
  <script type="text/javascript" src="bootstrap.js"></script>

  <script type="text/javascript">
    $(window).load(function() {
      $('#myModal').modal('show');
    });
  </script>

</head>

<body>
  <!-- Modal -->


  <div class="modal hide fade" id="myModal">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3>Modal header</h3>
    </div>
    <div class="modal-body">
      <p>Body text</p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Close</a>
      <a href="#" class="btn btn-primary">Save changes</a>
    </div>
  </div>


</body>

＆＃13;

我得到的错误是：

[错误]无法加载资源：服务器响应状态为404（未找到）（bootstrap.js，第0行） [错误] TypeError：undefined不是一个函数（评估＆＃39; $（＆＃39; #myModal＆＃39;）。modal（＆＃39; show＆＃39;）＆＃39;）（匿名函数）（nubia古物，第7行） dispatch（jquery.js，第4641行） handle（jquery.js，line 4309）

我做错了什么？任何帮助将不胜感激。我希望这是足够的信息，所以我不会得到负面的积分。我不知道怎么回答问题所以我没有被标记下来。

Answer 1

根据错误，bootstrap.js本身未加载。如果您对引导程序的CDN链接感兴趣，我已在下面粘贴它们（按http://getbootstrap.com/getting-started/#download中提供的那样复制）

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Answer 2

你的html上还有一些缺少的类。我已经改变了你的代码，现在工作正常

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <script src="http://code.jquery.com/jquery.js"></script>
  <script type="text/javascript"     src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


 <script type="text/javascript">
    $(window).load(function() {
      $('#myModal').modal('show');
    });
 </script>

</head>

<body>
  <!-- Modal -->

  <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-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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 -->
</body>
</html>

在页面加载时启动Bootstrap Modal不工作

2 个答案: