bootstrap static modal
2015-06-08 13:50
597 查看
modal 显示后,点击空白处不去 hide modal
<!DOCTYPE html> <html lang="en"> <head> <title> modal </title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Modal --> <div class="modal fade" id="staticModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> {backdrop:"static"} </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <button id="btn-static-modal" class="btn btn-primary" value="clickevent">backdropStatic</button> </div> <script> $(document).ready(function(){ $('#btn-static-modal').click(function(){ $('#staticModal').modal({backdrop:'static'}).modal('show'); }); }); </script> </body> </html>
相关文章推荐
- jeecg 3.5.2 新版本4种首页风格 【经典风格,shortcut风格,ACE bootstrap风格,云桌面风格】
- 10个最新的 Bootstrap 3 管理模板
- 基于Bootstrap+jQuery.validate Form表单验证实践
- laydate兼容bootstrap
- SpringMVC学习系列(12) 完结篇 之 基于Hibernate+Spring+Spring MVC+Bootstrap的管理系统实现
- bootstrap 导航布局
- BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
- BootStrap 智能表单系列 八 表单配置json详解
- BootStrap 智能表单系列 七 验证的支持
- BootStrap 智能表单系列 五 表单依赖插件处理
- BootStrap 智能表单系列 四 表单布局介绍
- BootStrap 智能表单系列 三 分块表单配置的介绍
- BootStrap 智能表单系列 二 BootStrap支持的类型简介
- bootstrap 智能表单 demo示例
- bootstrap 学习笔记 - 5 (Glyphicons字体 + 下拉菜单 + 按钮组+ 按钮下拉菜单)
- 基于Bootstrap3制作响应式布局网站(四)
- ASP.NET MVC Bootstrap极速开发框架
- 解决jquery-ui-autocomplete选择列表被Bootstrap模态窗遮挡的问题
- Bootstrap 栅格系统的精妙之处
- BootStrap实现带有增删改查功能的表格(DEMO详解)