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 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
7个JS基础知识总结
Mar 05 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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中sprintf与printf函数用法区别解析
2014/02/17 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
python遍历目录的方法小结
2016/04/28 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
如何用Python 加密文件
2020/09/10 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
python 自动识别并连接串口的实现
2021/01/19 Python
英国在线药房:Express Chemist
2019/03/28 全球购物
超市业务员岗位职责
2013/12/05 职场文书
农民工讨薪标语
2014/06/26 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2014年团队工作总结
2014/11/24 职场文书
工作调动申请报告
2015/05/18 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python