(bootstrap)导航栏或模态不起作用,具体取决于导入顺序

时间:2013-12-12 22:25:24

标签: jquery twitter-bootstrap include modal-dialog navbar

问题: 我有这个代码,它包含在每个网页的顶部:

<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
..metas...
<link rel="shortcut icon" href="img/logo.png">

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/custom.css" rel="stylesheet" media="screen">

<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/custom.js"></script>

<title><?php echo $pageTitle; ?></title>

当jquery之前包含bootstrap.min.js时,导航栏崩溃(对于小屏幕)可以工作(即它会下降并折叠起来)。 Navbar代码在这里:

<body style="background-image: url('img/subtle.png');">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.php"><img height="50" src="img/brand.png"></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="contact.php">Contact</a></li>
  </ul>
</div><!-- /.navbar-collapse -->
</nav>
<!--body continues -->

但是模态不起作用:

<script type="text/javascript">
    $(window).load(function(){
        $('#updateModal').modal('show');
    });
</script>
<!-- Update modal -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a class="close" href="index.php" aria-hidden="true">&times;</a>
                <h4 class="modal-title" id="updateLabel">Update a user</h4>
            </div>
            <div class="modal-body">
                <blockquote>
                    <form action="" method="post">
                        <label for="email">Change email</label>
                        <input type="text" name="email" value="<?php echo escape($user->data()->email); ?>" autocomplete="off"><br>

                        <input class="btn btn-primary" type="submit" value="Update">
                    </form>
                </blockquote>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary" href="index.php">Cancel</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

当我在bootstrap之前包含jQuery时,模态工作并且导航栏没有。

有什么想法吗? 谢谢!

1 个答案:

答案 0 :(得分:1)

Bootstrap的javascript文件(bootstrap.min.js)永远不应该在jQuery之前加载,因为它依赖于jQuery。将订单更改为:

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

原因是bootstrap js文件包含一堆jQuery插件,要定义它们,jQuery必须可用。