1
我有以下代码。我不知道为什么当点击登录按钮时，模态弹出不会弹出。我检查并确认data-target和data-toggle设置正确。以下是我的代码。bootstrap模式弹出不弹出
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Ritesh Sangwan">
<title>ossoc | Create account</title>
<link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<link rel="stylesheet" href="./css/bootstrap.css" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="./js/jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="./js/jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!------ Navabar start --->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a class="navbar-brand" href="./index.jsp">ossoc</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-btn">
<button id="loginbutton" type="button" class="btn btn-primary" data-target="#registerlogin" data-toggle="modal"><i class="glyphicon glyphicon-log-in"></i>Login</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!---- navbar end--->
<div class="container marketing">
<div class="jumbotron-modified well">
<div class="container">
<form id="register" action="register" role="form" class="form-horizontal" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">First name:</label>
<div class="col-sm-4">
<input id="fnameInput" name="registerfname" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last name:</label>
<div class="col-sm-4">
<input name="registerlname" type="text" class="form-control" id="lnameInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-4">
<input name="registeremail" class="form-control" id="emailInput" placeholder="[email protected]" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="passwordInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Confirm password:</label>
<div class="col-sm-4">
<input name="registerpassword" type="password" class="form-control" id="passwordConfirmInput" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<div class="checkbox">
<div id="acceptInput">
<input type="checkbox" />
I accept the terms and conditions.
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button id="submit" class="btn btn-success"><i class="glyphicon glyphicon-plus" style="margin-right: 5px"></i>Create account</button>
</div>
</div>
</form>
</div>
</div>
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>© 2013 Ritesh Sangwan. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
</div>
<!--- Model start-->
<div class="modal fade" id="registerlogin" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>Login</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="login" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="pull-right">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-log-in" style="margin-right: 5px"></i>Log in</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!---model end ---->
</body>
</html>
包括引导之前的jQuery解决了这个问题，但我不明白为什么会这样。毕竟这两个脚本都会加载页面加载。所以它是如何影响序列的。你可以解释吗。 – user3108790
第一个脚本是bootstrap，在加载时，它正在寻找jQuery来获取需要它的功能（Modal就是其中之一）。如果jQuery不存在引导程序加载时，它不会回溯并在事后寻找它，它只是打破。实际上查看一些文档，似乎有点不清楚。 Bootstrap应该更加坚定一些，包括jQuery FIRST，因为这是一个常见的问题。 – Travtex