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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
详解为生产环境编译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生成WAP页面
2006/10/09 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
Python字符串及文本模式方法详解
2020/09/10 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
美国性感内衣店:Yandy
2018/06/12 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
三分钟英语演讲稿
2014/04/24 职场文书
捐款感谢信
2015/01/20 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书