[英]Change Bootstrap modal option once it already exists
我正在使用Bootstrap Modal 。 我宣布它,我称之为,我展示它......一切似乎都没问题。
但是,如果我之前已经将“键盘”属性显示为已经存在的模态为假,我想在移动中更改它? 我的意思是:
首先,我创建一个模态执行此操作(如您所见,我将模态put键盘属性声明为false):
$('#myModal').modal({
show: false,
backdrop: true,
keyboard: false
});
但后来我声明了这个事件处理程序,这意味着如果发生“某事”,我希望将keyboard属性设置为true。
$('#myModal').on('shown', function(e) {
if (something){
$('#myModal').modal({keyboard: true});
}
}
所以,当我走的时候
$("#myModal").show();
事件处理程序没有按预期执行,因为一旦按下Escape键,我就无法关闭模式。 但我完全确定“某些东西”是真的,我已经检查并重新检查了$('#myModal').modal({keyboard: true})
被执行。
任何线索,为什么这不更新配置选项的值?
要更改已启动的Bootstrap插件(例如Modal)上的配置设置,您需要访问附加到元素的插件对象,例如$('#pluginElement').data['somePlugin']
,然后在其中设置options
。
对于Modal,您需要:
$('#myModal').data('modal').options.keyboard = true;
对于Bootstrap 3(如@Gerald的评论中所述),您需要
bs.modal
:
$('#myModal').data('bs.modal').options.keyboard = true;
有点超出了OP的范围,但现在两次我已经搜索了相同的解决方案(我的记忆是废话)和两次我遇到这个问题导致我最终的答案。 我的问题是如何将已经初始化和显示的模式(“可关闭”)变成“不可关闭的”模型。 即使另一个用户需要这个答案,很少见,这是我根据接受的答案做的:
* 使用了bootstrap3
$('#modal').off('keyup.dismiss.bs.modal'); // disable escape key
$('#modal').data('bs.modal').options.backdrop = 'static';
$('#modal button.close').hide();
请注意,我没有将options.keyboard属性更改为false(后面是调用escape()),如上所述。 我无法让它工作,所以在查看Bootstrap源之后,我看到它所做的只是删除'keyup.dismiss.bs.modal'的事件监听器。
要重新启用(在我的方案中,隐藏模型时):
$('#modal').on('hidden.bs.modal', function (e) {
$(this).data('bs.modal').escape(); // reset keyboard
$(this).data('bs.modal').options.backdrop = true;
$('button.close', $(this)).show();
});
这似乎完全笨拙,并且肯定会在即将推出的Bootstrap版本中破解,但现在可以使用......
干杯:)
对于bootstrap4
要在转义按钮上禁用关闭模式:
$('#myModal').off('keydown.dismiss.bs.modal');
要在单击背景时禁用关闭模式:
$('#myModal').data('bs.modal')._config.keyboard = false;
正如夜间警告的那样,这可能会在未来的bootstrap版本中出现问题。
您还可以在HTML标记中添加属性: data-keyboard =“false”
<div id="myModal" class="modal hide fade" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
这个对我有用!
另一种选择,如果您不知道模态是否已经打开,并且您需要配置模态选项(Bootstrap 3):
var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal
if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
$modal.modal({
keyboard: keyboard,
backdrop: backdrop
});
} else { // Modal has already been opened
$modal.data('bs.modal').options.keyboard = keyboard;
$modal.data('bs.modal').options.backdrop = backdrop;
if(keyboard === false) {
$modal.off('keydown.dismiss.bs.modal'); // Disable ESC
} else { //
$modal.data('bs.modal').escape(); // Resets ESC
}
}
谢谢@nokturnal
当模态已经打开时,设置背景和esckey不关闭模态
$('div[name="modal"]').data('bs.modal').options.backdrop = 'static';
$('div[name="modal"]').off('keydown.dismiss.bs.modal');
取消设置背景和关键esc的目的是不关闭模态
$('div[name="user_profile_modal"]').data('bs.modal').options.backdrop = true;
$('div[name="user_profile_modal"]').data('bs.modal').escape();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.