我正在制作一个允许用户登录的模态表单。只要我点击“登录”,模态表单就会出现并消失。
这是调用模态表单的按钮。它是我导航栏的一部分:
<li><a href=#myModal data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
模态身体:
<div class="modal fade" id="myModal" tableindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Log-in</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
</div>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Log-in</a>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
此代码适用于jsBin。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<li><a href=#myModal data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<div class="modal fade" id="myModal" tableindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Log-in</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
</div>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Log-in</a>
</div>
</div>
</div>
</div>
</body>
</html>
&#13;
答案 1 :(得分:0)
听起来你可能会为Bootstrap Modal加载两次JavaScript。您是否可以加载 bootstrap.js 以及 bootstrap-modal.js ?或者 bootstrap.js 和 bootstrap.min.js ?