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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
JS 事件机制完整示例分析
Jan 15 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
浅谈PHP封装CURL
2019/03/06 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python自动点赞功能的实现思路
2020/02/26 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
竞选班干部演讲稿100字
2014/08/20 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
培训感想范文
2015/08/07 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android