bootstrap中模态框、模态框的属性实例详解


Posted in Javascript onFebruary 17, 2017

工作中有需要用到模态框的可以看看

<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnCancel">
            ×
          </button>
          <h4 class="modal-title" id="myModalLabel">
            前台菜单管理
          </h4>
        </div>
          <div class="modal-body">
            <div>
              <table width="100%" border="0" class="userCon_2">
                <tr>
                  <th width="30%">名称:</th>
                  <td width="70%">
                    <input type="text" name="Name" class="form-control" style="border-radius:3px; width:220px;" id="txtName" required="" aria-required="true">
                  </td>
                </tr>
                <tr>
                  <th>动作类型:</th>
                  <td>
                    <select class="selectpicker show-tick" id="txtType" style="height: 30px; width: 220px;" name="Type">
                      <option value="view">view</option>
                      <option value="click">click</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <th>路径:</th>
                  <td>
                    <input type="text" name="Url" class="form-control" style="border-radius:3px; width:220px;" id="txtUrl" required="" aria-required="true" />
                  </td>
                </tr>
                <tr>
                  <th>排序:</th>
                  <td>
                    <input type="text" name="Rank" class="form-control" style="border-radius:3px; width:220px;" id="txtRank" />
                    <input type="hidden" name="MainMenuGuid" value="" id="txtMainMenuGuid" />
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="modal-footer" style="border-top:none;">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">关闭</button>
            <button type="submit" class="btn btn-primary" id="btnSave">保存</button>
          </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

其中模态框有个属性可以避免点击遮罩层导致模态框关闭。就是div中设置的 data-backdrop="static"。这样可以避免在模态框中输入内容时突然的误操作导致模态框关闭。

另外还有一个属性:data-keyboard="false"。此举是设置按下ESC退出键无效。同样是为了避免突然的误操作导致模态框关闭。

bootstrap中模态框、模态框的属性实例详解

<div id="toolbar" class="btn-group">
      <button id="btn_add" type="button" class="btn btn-newAdd" data-toggle="modal" data-target="#userModal">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
      </button>
      <button id="btn_edit" type="button" class="btn btn-newAdd">
        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改
      </button>
      <button id="btn_delete" type="button" class="btn btn-newAdd">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
      </button>
</div>

其中按钮属性 data-toggle="modal" data-target="#userModal" 是打开模态框。

Javascript 相关文章推荐
js验证模型自我实现的具体方法
Jun 21 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 #Javascript
原生js实现日期计算器功能
Feb 17 #Javascript
Vue自定义指令拖拽功能示例
Feb 17 #Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 #Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 #Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 #Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 #Javascript
You might like
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
python Django模板的使用方法
2016/01/14 Python
itchat接口使用示例
2017/10/23 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python3中编码获取网页的实例方法
2020/11/16 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
什么是lambda函数
2013/09/17 面试题
迟到检讨书1000字
2014/01/15 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
员工考核管理制度
2014/02/02 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
初中差生评语
2014/12/29 职场文书
画展观后感
2015/06/17 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
python Tkinter模块使用方法详解
2022/04/07 Python