BootStrap模态框闪退问题实例代码详解


Posted in Javascript onDecember 10, 2018

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

代码如下

<!--搜索注册条-->
 <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-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" />男     </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模态框闪退问题实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
JavaScript的==运算详解
Jul 20 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
js代码实现轮播图
May 04 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
详解为生产环境编译Angular2应用的方法
Dec 10 #Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 #Javascript
es6基础学习之解构赋值
Dec 10 #Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 #Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 #Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 #Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 #Javascript
You might like
php GD绘制24小时柱状图
2008/06/28 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
js滚动条多种样式,推荐
2007/02/05 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python爬取指定微信公众号文章
2018/12/20 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
浅谈Python中的继承
2020/06/19 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
成教毕业生自我鉴定
2013/10/23 职场文书
三爱活动实施方案
2014/03/19 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
离婚协议书范本
2015/01/26 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS