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 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
详解为生产环境编译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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
Yii配置文件用法详解
2014/12/04 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
javascript闭包的理解
2015/04/01 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
医务工作者先进事迹材料
2014/01/26 职场文书
交通事故协议书
2014/04/15 职场文书
国贸专业求职信
2014/06/28 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
小学科学教学计划
2015/01/21 职场文书
专业技术职务聘任证明
2015/03/02 职场文书