Javascript 引导模式弹出窗口未弹出
我有以下代码。我不知道为什么点击登录按钮时，模式弹出窗口不会弹出。我检查并确认Javascript 引导模式弹出窗口未弹出,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我有以下代码。我不知道为什么点击登录按钮时，模式弹出窗口不会弹出。我检查并确认数据目标和数据切换设置正确。下面是我的代码 <!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="s" uri="/struts-tags" %> <html l
数据目标数据切换<!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="someone@example.com" />
</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>
ossoc |创建帐户
-
登录
名字：
姓氏：
电邮：
密码：
确认密码：
我接受这些条款和条件。
创建帐户
&抄袭；2013年，丽泰桑湾&米德多&米德多
x
登录
电子邮件
密码
登录
在引导之前包含jquery可以解决问题，但我不明白为什么会这样。毕竟这两个脚本都将加载页面加载。所以它对顺序有多重要。你能解释一下吗？第一个脚本是bootstrap，在加载时，它正在寻找jQuery以获得需要它的特性（Modal就是其中之一）。如果jQuery在引导加载时不在那里，那么它就不会回溯并在事实发生后寻找它，它只会崩溃。事实上，翻阅一些文件，似乎有点不清楚。Bootstrap应该更坚决地首先包含jquery，因为这是一个常见的问题。