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矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 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
PHP页面间传递参数实例代码
2008/06/05 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
jQuery 使用手册(五)
2009/09/23 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
深入理解令牌认证机制(token)
2019/08/22 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
python发送邮件脚本
2018/05/22 Python
python3 拼接字符串的7种方法
2018/09/12 Python
python3.6数独问题的解决
2019/01/21 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
python 批量将中文名转换为拼音
2021/02/07 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
校园报刊亭的创业计划书
2014/01/02 职场文书
大学活动总结范文
2014/04/29 职场文书
美术专业自荐信
2014/07/07 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android