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 相关文章推荐
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
js 实现碰撞检测的示例
Oct 28 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 5.3.0 安装分析心得
2009/08/07 PHP
深入php处理整数函数的详解
2013/06/09 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
Position属性之relative用法
2015/12/14 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
python pyheatmap包绘制热力图
2018/11/09 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python字典key不能是可以是啥类型
2020/08/04 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
班主任班级寄语大全
2014/04/04 职场文书
工作保证书范文
2014/04/29 职场文书
拔河比赛口号
2014/06/10 职场文书
合作协议书模板2014
2014/09/26 职场文书
事业单位年度考核评语
2014/12/31 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2019新员工心得体会
2019/06/25 职场文书