模态框闪退到你还看不到模态框的内容呢,就屏幕灰了一下就是
代码如下
<!--搜索注册条-->
<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\">×</button>
<h4 class=\"modal- \">注册</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\" />男 </label>
<label class=\"radio-inline\"><input class=\"radio\" />女 </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就好了,但模态框的排版出现了问题
总结
以上所述是小编给大家介绍的BootStrap模态框闪退问题实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
继续阅读与本文标签相同的文章
上一篇 :
自动驾驶汽车硬件与软件技术介绍
下一篇 :
C语言最难啃的三块硬骨头,你越过去了吗?
-
阿里云创峰会聊城站高峰对话一:品牌明星的创业故事与启示
2026-05-19栏目: 教程
-
2019阿里云910会员节大促主会场全攻略
2026-05-19栏目: 教程
-
高榕资本高翔:发展产业互联网,基础条件已经具备
2026-05-19栏目: 教程
-
高榕资本高翔:未来5年高度关注5G生态和云生态
2026-05-19栏目: 教程
-
聊城市人民政府副市长洪玉振:拥抱互联网、数字世界
2026-05-19栏目: 教程
