如何检查引导模式是否打开，以便我可以使用 jquery 验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19506672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check if bootstrap modal is open, so i can use jquery validate
提问by Mariana Hernandez
i need to make a validation only if a modal is open, because if i open it, and then i close it, and the i press the button that opens the modal it doesn't work because it is making the jquery validation, but not showing because the modal was dismissed.
我只需要在模态打开时进行验证，因为如果我打开它，然后我关闭它，并且我按下打开模态的按钮它不起作用，因为它正在进行 jquery 验证，但不是显示是因为模态被取消。
So i want to ad a jquery if modal is open so the i do validate, is this possible?
所以我想在模态打开时添加一个 jquery 以便我进行验证，这可能吗？
<script>
$(document).ready(function(){
var validator =$('#form1').validate(
{
ignore: "",
rules: {
usu_login: {
required: true
},
usu_password: {
required: true
},
usu_email: {
required: true
},
usu_nombre1: {
required: true
},
usu_apellido1: {
required: true
},
usu_fecha_nac: {
required: true
},
usu_cedula: {
required: true
},
usu_telefono1: {
required: true
},
rol_id: {
required: true
},
dependencia_id: {
required: true
},
},
highlight: function(element) {
$(element).closest('.grupo').addClass('has-error');
if($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0)
{
$(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab)
{
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').tab('show');
});
}
},
unhighlight: function(element) {
$(element).closest('.grupo').removeClass('has-error');
}
});
}); // end document.ready
</script>
回答by Brian M. Hunt
To avoid the race condition @GregPettit mentions, one can use:
为了避免@GregPettit 提到的竞争条件，可以使用：
($("element").data('bs.modal') || {})._isShown // Bootstrap 4
($("element").data('bs.modal') || {}).isShown // Bootstrap <= 3
as discussed in Twitter Bootstrap Modal - IsShown.
如Twitter Bootstrap Modal - IsShown 中所述。
When the modal is not yet opened, .data('bs.modal')returns undefined, hence the || {}- which will make isShownthe (falsy) value undefined. If you're into strictness one could do ($("element").data('bs.modal') || {isShown: false}).isShown
当模态尚未打开时，.data('bs.modal')返回undefined，因此|| {}- 这将使isShown（假）值undefined。如果你很严格，你可以做($("element").data('bs.modal') || {isShown: false}).isShown
回答by tleef
You can use
您可以使用
$('#myModal').hasClass('in');
Bootstrap adds the inclass when the modal is open and removes it when closed
Bootstrapin在模态打开时添加类，关闭时将其删除
回答by alexoviedo999
You can also directly use jQuery.
您也可以直接使用 jQuery。
$('#myModal').is(':visible');
回答by Raja Khoury
Check if a modal is open
检查模态是否打开
$('.modal:visible').length && $('body').hasClass('modal-open')
$('.modal:visible').length && $('body').hasClass('modal-open')
To attach an event listener
附加事件侦听器
$(document).on('show.bs.modal', '.modal', function () {
// run your validation... ( or shown.bs.modal )
});
回答by Raja Khoury
Bootstrap 2 , 3Check is any modal open in page :
Bootstrap 2 , 3检查页面中是否有任何模式打开：
if($('.modal.in').length)
compatible version Bootstrap 2 , 3 , 4+
兼容版本Bootstrap 2、3、4+
if($('.modal.in, .modal.show').length)
Only Bootstrap 4+
只有引导程序 4+
if($('.modal.show').length)
回答by joanfihu
$("element").data('bs.modal').isShown
won't work if the modal hasn't been shown before. You will need to add an extra condition:
如果之前未显示模态，则将不起作用。您将需要添加一个额外的条件：
$("element").data('bs.modal')
so the answer taking into account first appearance:
所以考虑到第一次出现的答案：
if ($("element").data('bs.modal') && $("element").data('bs.modal').isShown){
...
}
回答by Bhavesh Lalwani
You can also use
你也可以使用
$('#myModal').hasClass('show');
回答by Sokka Boomerang
Why complicate things when it can be done with simple jQuery like following.
当它可以用简单的 jQuery 完成时，为什么要把事情复杂化，如下所示。
$('#myModal').on('shown.bs.modal', function (e) {
console.log('myModal is shown');
// Your actual function here
})
回答by Ricardo
On bootstrap-modal.js v2.2.0:
在 bootstrap-modal.js v2.2.0 上：
( $('element').data('modal') || {}).isShown
