我使用Twitter的引导情态动词,使用默认选项,您可以单击背景或按[ESC]关闭模式。
然而,当我在模态启动AJAX操作我想以任何方式被封闭停用模式。 所以我禁用按钮和隐藏模式的关闭按钮,但我无法弄清楚如何禁用背景和[Esc]键。
我试过了:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
但是,这似乎并没有在飞行工作。
我还需要一次AJAX操作完成后重新启用的背景和键盘。
我使用Twitter的引导情态动词,使用默认选项,您可以单击背景或按[ESC]关闭模式。
然而,当我在模态启动AJAX操作我想以任何方式被封闭停用模式。 所以我禁用按钮和隐藏模式的关闭按钮,但我无法弄清楚如何禁用背景和[Esc]键。
我试过了:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
但是,这似乎并没有在飞行工作。
我还需要一次AJAX操作完成后重新启用的背景和键盘。
注 :该解决方案的目标是Twitter的引导2.x的 ! 见这个答案 (略低于)根据引导3分歧。
扩展引导模式功能,而无需修改原始来源。
感谢@大卫和他在建议如何扩展Twitter的引导插件 ,我终于得到它的工作。 这是他与情态“锁”的解决方案稍加修改的版本中添加。 我张贴它作为一个附加的应答,因为我认为它可能会成为别人的,像我有这个问题用力挣扎的起点。
// save the original function object
var _superModal = $.fn.modal;
// add locked as a new option
$.extend( _superModal.defaults, {
locked: false
});
// create a new constructor
var Modal = function(element, options) {
_superModal.Constructor.apply( this, arguments )
}
// extend prototype and add a super function
Modal.prototype = $.extend({}, _superModal.Constructor.prototype, {
constructor: Modal
, _super: function() {
var args = $.makeArray(arguments)
// call bootstrap core
_superModal.Constructor.prototype[args.shift()].apply(this, args)
}
, lock : function() {
this.options.locked = true
}
, unlock : function() {
this.options.locked = false
}
, hide: function() {
if (this.options.locked) return
this._super('hide')
}
});
// override the old initialization with the new constructor
$.fn.modal = $.extend(function(option) {
var args = $.makeArray(arguments),
option = args.shift()
// this is executed everytime element.modal() is called
return this.each(function() {
var $this = $(this)
var data = $this.data('modal'),
options = $.extend({}, _superModal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) {
$this.data('modal', (data = new Modal(this, options)))
}
if (typeof option == 'string') {
data[option].apply( data, args )
}
});
}, $.fn.modal);
利用这种技术它不应该是nessecary改变bootstrap.js,和相同的功能更容易被引导项目之间共享。 此方法应该适用于所有其他的引导插件。 迄今只有按钮尝试,虽然,但我不能SE为什么它不应该。
看到工作小提琴- > http://jsfiddle.net/Sz7ZS/
还有一个更简单的方法来做到这一点。 这引导拉动请求解释多一点。 该解决方案禁用关闭模式(键盘,鼠标点击,关闭按钮)的所有方法。
所有你需要做的禁用关闭模式是:
$('#myModal').data('bs.modal').isShown = false;
再次启用关闭:
$('#myModal').data('bs.modal').isShown = true;
例
下面是与jQuery的GET协同工作,一些示例代码:
// disable closing the modal
$('#myModal').data('bs.modal').isShown = false;
// Send an HTTP GET request to the server - replace this with getJSON, post or ajax as needed
$.get( "ajax/test.html", function( data ) {
// enable closing the modal
$('#myModal').data('bs.modal').isShown = true;
// Do something with the data
$( ".result" ).html( data );
});
你是不是谁缺少该功能的唯一的一个。 我想举有时候太“简约”,后面的人有想法很多,应在“执行层”来完成,但它是没有用的,当引导jQuery插件本身就不可能!
你必须自己实现的功能,就像这样 :
在bootstrap.js
V2.1.1模态开始于61行。
在Modal.prototype
,增加两个功能, lock
和unlock
,所以它看起来像这样(我在这里展示的只是开始modal.prototype
,监守实在是太多了代码)
Modal.prototype = {
constructor: Modal
//add this function
, lock: function () {
this.options.locked = true
}
//add this function
, unlock: function () {
this.options.locked = false
}
, toggle: function () {
...
...
然后,还Modal.prototype,找到函数hide
,并添加一行,所以它看起来是这样的(同样,只有躲的顶部显示)
, hide: function (e) {
e && e.preventDefault()
var that = this
//add this line
if (that.options.locked) return
e = $.Event('hide')
...
...
最后,改变$.fn.modal.defaults
到:
$.fn.modal.defaults = {
backdrop: true
, keyboard: true
, show: true
, locked: false //this line is added
}
现在,你有你的引导模式上即时锁定/解锁功能,防止用户在关键时刻关闭模式。
例如 :
这是“现场演示”的一个修改过的版本从http://twitter.github.com/bootstrap/javascript.html#modals
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" onclick="$('#myModal').modal('lock');">lock</button>
<button class="btn btn-primary" onclick="$('#myModal').modal('unlock');">unLock</button>
</div>
</div>
<script type="text/javascript">
我已插入两个按钮,“锁定”和“解锁” - 点击时,它们设置在模态锁定或正常模式(它被初始化与设置)
编辑 ,你的情况,你就必须做阿贾克斯时锁定/ onlock拨打:
$("myModal").modal('lock');
$.ajax({
url: url,
...
...
, success(html) {
...
...
$("#myModal").modal('unlock');
}
});
你可以创建一个变量isBlocked可以设置,在做AJAX调用为真,那么你可以检查它bootsrap模式隐藏事件是这样的:
$('#myModal').on('hide.bs.modal', function (e) {
//Prevent modal from closing is isBlocked is true
if(isBlocked) return e.preventDefault();
})
我觉得这种方式比延长Bootsrap容易,希望它可以帮助别人:d
感谢@davidkonrad您这方面的工作。 我试图实现这个还有,似乎事情已经自举3.现在,而不是改变:
_superModal.defaults
它现在连接到构造函数,因此你必须做
_superModal.Constructor.DEFAULTS
另外,构造发生了变化,这意味着我不得不将它复制并修改它小于理想。 相反,我想出了下面的代码工作,并且不复制构造函数,而且应该更加防呆如果引导改变前进。 试试吧:
// save the original function object
var _superModal = $.fn.modal;
// add locked as a new option
$.extend( _superModal.Constructor.DEFAULTS, {
locked: false
});
// capture the original hide
var _hide = _superModal.Constructor.prototype.hide;
// console.log('HIDE:', _hide);
// add the lock, unlock and override the hide of modal
$.extend(_superModal.Constructor.prototype, {
// locks the dialog so that it cannot be hidden
lock: function() {
// console.log('lock called');
// console.log('OPTIONS',this.options);
this.options.locked = true;
}
// unlocks the dialog so that it can be hidden by 'esc' or clicking on the backdrop (if not static)
,unlock: function() {
// console.log('unlock called');
this.options.locked = false;
}
// override the original hide so that the original is only called if the modal is unlocked
,hide: function() {
// console.log('hide called');
if (this.options.locked) return;
_hide.apply(this, arguments);
}
});
因此,为了锁定模式:
$('#dlg').modal('lock');
和解锁:
$('#dlg').modal('unlock');
好极了!
我更新了这个真棒脚本引导4 3.我让这两种情况下,因为我有我用我的项目,一个全球性的脚本,它们中的一些使用这两种版本的自举的工作(不用担心,每个项目有一个自举)。 如果任何人有一个更好的主意,请与我们分享。
// save the original function object
var _superModal = $.fn.modal;
// Bootstrap 3: Constructor.DEFAULTS
// Bootstrap 4: Constructor.Default
var _superModalDefault = (typeof _superModal.Constructor.DEFAULTS === 'undefined') ? _superModal.Constructor.Default : _superModal.Constructor.DEFAULTS;
// add locked as a new option
$.extend(_superModalDefault, {
locked: false
});
// capture the original hide
var _hide = _superModal.Constructor.prototype.hide;
// console.log('HIDE:', _hide);
// add the lock, unlock and override the hide of modal
$.extend(_superModal.Constructor.prototype, {
// locks the dialog so that it cannot be hidden
// Bootstrap 3: this.options
// Bootstrap 4: this._config
lock: function() {
// console.log('lock called');
if (this.options)
this.options.locked = true; // Bootstrap 3
else
this._config.locked = true; // Bootstrap 4
}
// unlocks the dialog so that it can be hidden by 'esc' or clicking on the backdrop (if not static)
,unlock: function() {
// console.log('unlock called');
if (this.options)
this.options.locked = false; // Bootstrap 3
else
this._config.locked = false; // Bootstrap 4
}
// override the original hide so that the original is only called if the modal is unlocked
,hide: function() {
// console.log('hide called');
if (this.options)
if (this.options.locked) return; // Bootstrap 3
else
if (this._config.locked) return; // Bootstrap 4
_hide.apply(this, arguments);
}
});