BootStrap模态框闪退问题

最新推荐文章于 2024-04-03 18:20:52 发布

江西师范大学-20届-吴悠

最新推荐文章于 2024-04-03 18:20:52 发布

阅读量1.8k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_39905917/article/details/84919926

版权

前端开发专栏收录该内容

21 篇文章 1 订阅

订阅专栏

BootStrap模态框闪退问题

模态框闪退到你还看不到模态框的内容呢，就屏幕灰了一下就是
代码如下

<!--搜索注册条-->
		<div class="container-fluid">
				<form class="navbar-form navbar-center" role="Search">
						  <div class="form-group text-center col-sm-4">
							     <input type="text" class="form-control" placeholder="Search">
							     <span class="input-group-addon">搜索</span>
						  </div>
						  <div class="container">
						       <button type="submit" class="btn-info">登录</button>
						       <button type="button" class="btn-danger">注销</button>
						       <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >注册</button>
						      <!--注册的模态框-->
					        <div class="modal fade" id="myModal">
							         <div class="modal-dialog">
								            <div class="modal-content">
									              <div class="modal-header">
										                <button type="button" class="close" data-dismiss="modal">&times;</button>
										                <h4 class="modal-title">注册</h4>
									              </div>
									              <div class="modal-body">
										                <div class="container">
											                  <div class="input-group">
												                    <label>手机号</label>
												                    <input type="text" class="form-control" placeholder="请输入您的手机号" />
											                  </div>
											                  <div class="input-group">
												                    <label>姓名</label>
												                    <input type="text" class="form-control" placeholder="请输入您的姓名" />
											                  </div>
											                  <div class="input-group">
												                    <label>邮箱</label>
												                    <input class="text" class="form-control" placeholder="请输入您的邮箱" />
												                    <span class="input-group-addon">@qq.com</span>
											                  </div>
											                  <div class="input-group">
												                    <label>性别</label>
												                    <label class="radio-inline"><input class="radio" />男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
												                    <label class="radio-inline"><input class="radio" />女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
											                  </div>
											                  <div class="input-group">
												                    <div class="progress">
													                  <div class="progress-bar" style="width: 50px;">
														                <span class="sr-only">注册信息提交中......</span>
													              </div>
												            </div>
											          </div><!--body部分-->
																<div class="modal-footer">
																	<button class="btn btn-primary">提交</button>
																	<button class="btn btn-default" data-dismiss="modal">关闭</button>
																</div>
										        </div>
							         </div>
						      </div>
						      <!--注册的模态框-->
						      </div>
					</form>
				<!--搜索注册条-->
		</div>

最后把form改成nav就好了，但模态框的排版出现了问题