Bootstrap模式登录表单立即消失吗？
[英]Bootstrap Modal Log-In Form Disappears Immediately?
问题描述
我正在制作允许用户登录的模态表单。单击“登录”后，模态表单就会出现并消失。
这是调用模式形式的按钮。 这是我的导航栏的一部分：
<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>
2 个解决方案
解决方案1
1 已采纳
<!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>
解决方案2
0 2017-03-18 23:22:15
听起来您可能两次加载了Bootstrap Modal的JavaScript。 您是否可能同时加载bootstrap.js和bootstrap-modal.js ？ 还是bootstrap.js和bootstrap.min.js都这样 ？
调用动态模式引导程序进行登录
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.