我尝试使用引导程序模式类制作弹出式注册表单，但弹出式窗口不起作用
[英]I tried to use bootstrap modal class to make a popup signup form but popup doesn't work
问题描述
我尝试使用bootstrap modal class制作弹出式注册表单，当我按下注册按钮窗口时，淡入淡出并重新加载就可以了。 弹出窗口不起作用。 我正在使用bootstrap 3.3.6。 请帮忙。
这是注册按钮代码：
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button>
</form>
我在导航中使用了注册按钮（navbar-inverse）。
这是弹出表单代码：
<div class="modal fade" id="signupForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="">
<span>×</span>
</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">User Name :</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Email :</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Confirm Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
我将此弹出式表单代码编码为注册按钮代码下方，这意味着它位于导航栏中
3 个解决方案
解决方案1
0 已采纳 2016-04-10 15:08:00
请检查以下内容：
我创建了一个JS小提琴，在这里工作正常。
---- https://jsfiddle.net/DTcHh/19115/
您必须将Bootstrap js和css文件包括到您的项目中才能使其正常工作。
解决方案2
0 2016-04-10 15:19:34
这是您的工作代码
<html> <head> <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> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <form class="navbar-form navbar-right"> <button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button> </form> <div class="modal fade" id="signupForm" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label=""> <span>×</span> </button> <h4 class="modal-title">Sign Up</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label class="col-md-4 col-md-offset-1">User Name :</label> <div class="col-md-5"> <input type="text" class="form-control input-sm"> </div> </div> <div class="form-group"> <label class="col-md-4 col-md-offset-1">Email :</label> <div class="col-md-5"> <input type="email" class="form-control input-sm"> </div> </div> <div class="form-group"> <label class="col-md-4 col-md-offset-1">Password :</label> <div class="col-md-5"> <input type="password" class="form-control input-sm"> </div> </div> <div class="form-group"> <label class="col-md-4 col-md-offset-1">Confirm Password :</label> <div class="col-md-5"> <input type="password" class="form-control input-sm"> </div> </div> <div class="form-group"> <div class="col-md-2 col-md-offset-8"> <input type="submit" class="btn btn-success" value="submit"> </div> </div> </form> </div> </div> </div> </div> </body> </html>
解决方案3
0 2016-04-10 17:50:53
我解决了这个问题。 我发现原因是按钮类型应该是不submit button 。 我改变了按钮类型button ，然后它的工作。
尽管包含脚本和 css，但 Bootstrap 模式弹出窗口将不起作用
[英]Although scripts and css included, Bootstrap modal popup won't work
巨大的弹出窗口：为什么边框半径在图像上不起作用，如何使它起作用？
[英]magnific popup: Why doesn't border radius work on the image and how can i make it work?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.