README

注意：由于此插件是为了解决BS2中许多问题而创建的，因此它仍然使用BS2的标记语法。目前我认为默认的BS3模态解决了许多更大的问题，不值得维护两个版本的此插件。

Bootstrap Modal v2.2.6

在此处查看实时演示。

扩展Bootstrap的本地模态，提供额外功能。引入一个在幕后通过监听它们的事件来处理多个模态的ModalManager类。

默认情况下，在body上创建一个ModalManager，可以通过jQuery插件接口访问。

    $('body').modalmanager('loading');

Bootstrap-Modal可以用作Bootstrap的Modal类的替代品，或作为库的补丁。

Bootstrap 3

如果您正在使用BS3，我已提供兼容的CSS补丁。在主bootstrap-modal.css文件之前包含bootstrap-modal-bs3patch.css以使用此插件与Bootstrap 3。

如果您使用加载旋转器功能，可能还需要更改默认模板以在js中兼容。

    $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner = 
        '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
            '<div class="progress progress-striped active">' +
                '<div class="progress-bar" style="width: 100%;"></div>' +
            '</div>' +
        '</div>';

概述

向后兼容
响应式
可堆叠
全宽
通过AJAX加载内容
禁用背景滚动

安装

在主bootstrap css文件之后包含css/bootstrap-modal.css。
在主bootstrap js文件之后包含js/bootstrap-modalmanager.js和js/bootstrap-modal.js。

	<link href="css/bootstrap.css" rel="stylesheet" />
	<link href="css/bootstrap-responsive.css" rel="stylesheet" />
 	<link href="css/bootstrap-modal.css" rel="stylesheet" />

 	<script src="js/bootstrap.js"></script>
 	<script src="js/bootstrap-modalmanager.js"></script>
 	<script src="js/bootstrap-modal.js"></script>

选项

除了标准的bootstrap选项之外，您现在还可以访问以下选项

模态框

宽度设置模态框的初始宽度。
高度设置模态框的初始高度。
最大高度 设置模态框体的最大高度。
加载切换加载状态。
旋转器 提供自定义的加载旋转器图片或动画。
背景模板 提供自定义的模态框背景。
consumeTab 用于启用具有data-tabindex的模态框的tabindex。默认设置为true。
focusOn 显示模态框后设置焦点到元素或选择器。
replace 如果设置为true，则打开模态框时将替换最顶部的模态框。
attentionAnimation 设置由attention方法使用的动画。任何animate.css中的动画都受支持，但默认只包含shake动画。
modalOverflow 将此属性设置为true以用于具有高度动态内容的模态框。这将强制模态框表现得好像它比视口大。
manager 设置模态框的管理器。默认设置为GlobalModalManager，并且很可能不需要重写。

ModalManager

加载切换加载状态。
backdropLimit 限制页面上同时出现的背景数量。
旋转器 提供自定义的加载旋转器图片或动画。
backdropTemplate 提供自定义的modalmanager背景。当调用$element.modalmanager('loading')时使用此背景。

获取模态框管理器的引用

如果您没有创建自己的ModalManager，可能需要引用它。这可以通过以下代码片段轻松实现：

	var modalManager = $("body").data("modalmanager");
	var openModals = modalManager.getOpenModals();
	modalManager.removeLoading();

之后，您将能够调用模态管理器拥有的任何方法，例如：

removeLoading（移除加载和背景窗口）；
getOpenModals（获取已打开的模态框）；
等等；

禁用背景滚动

如果您想防止背景页面滚动（例如，查看演示），必须在页面内容中包裹一个<div class="page-container">。例如：

	<body>
	   <div class="page-container">
		  <div class="navbar navbar-fixed-top">...</div>
		  <div class="container">...</div>
	   </div>
	</body>

这样做而不是简单地在模态框打开时设置overflow: hidden的原因是为了避免滚动条出现/消失时页面发生偏移。这还允许在存在高模态框时文档可滚动，但仅限于模态框的高度，而不是整个页面的高度。

将模态框限制在窗口大小内

您可以使用类似以下内容将模态框的高度绑定到窗口：

    $.fn.modal.defaults.maxHeight = function(){
        // subtract the height of the modal header and footer
        return $(window).height() - 165; 
    }

注意： 这将由响应式特性覆盖，并且仅当模态框显示时设置，而不是当窗口大小改变时。

模态表单的Tab索引

您可以使用data-tabindex而不是默认的tabindex来指定模态框内的tab索引。

    <input type="text" data-tabindex="1" />
    <input type="text" data-tabindex="2" />

请参考演示页面上的堆叠示例。

jschr / bootstrap-modal

维护者

详细信息