blocks|key|213203|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213204|$('#myModal').hasClass('in');|code-block|syntax|javascript|213205|Bootstrap在模式打开时添加in类，在关闭时将其删除|offset|length|style|CODE|213206|entityMap^0|0|0|H|2|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can use

<pre><code>$('#myModal').hasClass('in');
</code></pre>

Bootstrap adds the <code>in</code> class when the modal is open and removes it when closed

blocks|key|213253|text|要避免@GregPettit提到的竞争条件，可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213254|($("element").data('bs.modal')+%7C%7C+{})._isShown++++//+Bootstrap+4
($("element").data('bs.modal')+%7C%7C+{}).isShown+++++//+Bootstrap+<=+3

//+or,+with+the+optional+chaining+operator+(?.)
$("element").data('bs.modal')?._isShown++++//+Bootstrap+4
$("element").data('bs.modal')?.isShown+++++//+Bootstrap+<=+3|code-block|syntax|javascript|213255|正如Twitter+Bootstrap+Modal+-+IsShown中所讨论的。|offset|length|213256|当模式尚未打开时，.data('bs.modal')返回undefined，因此返回%7C%7C+{}+-这将使isShown成为(falsy)值undefined。如果你对严格感兴趣，你可以做($("element").data('bs.modal')+%7C%7C+{isShown:+false}).isShown|style|CODE|213257|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/8755561^0|0|0|2|X|0|0|9|H|S|9|16|5|1G|7|1X|9|2L|1N|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@$I|13|J|14|M|N]|$I|15|J|16|M|N]|$I|17|J|18|M|N]|$I|19|J|1A|M|N]|$I|1B|J|1C|M|N]|$I|1D|J|1E|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

To avoid the race condition @GregPettit mentions, one can use:
<pre><code>($(&quot;element&quot;).data('bs.modal') || {})._isShown // Bootstrap 4
($(&quot;element&quot;).data('bs.modal') || {}).isShown // Bootstrap &lt;= 3

// or, with the optional chaining operator (?.)
$(&quot;element&quot;).data('bs.modal')?._isShown // Bootstrap 4
$(&quot;element&quot;).data('bs.modal')?.isShown // Bootstrap &lt;= 3
</code></pre>
as discussed in <a href="https://stackoverflow.com/questions/8755561">Twitter Bootstrap Modal - IsShown</a>.
When the modal is not yet opened, <code>.data('bs.modal')</code> returns <code>undefined</code>, hence the <code>|| {}</code> - which will make <code>isShown</code> the (falsy) value <code>undefined</code>. If you're into strictness one could do <code>($(&quot;element&quot;).data('bs.modal') || {isShown: false}).isShown</code>

blocks|key|213262|text|您也可以直接使用jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213263|$('#myModal').is(':visible');|code-block|syntax|javascript|213264|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can also directly use jQuery.

<pre><code>$('#myModal').is(':visible');
</code></pre>

blocks|key|213299|text|$("element").data('bs.modal').isShown|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|213300|如果以前没有显示过模式，则不起作用。您需要添加一个额外的条件：|unstyled|213301|$("element").data('bs.modal')|213302|所以考虑到第一次出现的情况，答案是：|213303|if+($("element").data('bs.modal')+&&+$("element").data('bs.modal').isShown){
...+
}|213304|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>$("element").data('bs.modal').isShown
</code></pre>

won't work if the modal hasn't been shown before. You will need to add an extra condition:

<pre><code>$("element").data('bs.modal')
</code></pre>

so the answer taking into account first appearance:

<pre><code>if ($("element").data('bs.modal') &amp;&amp; $("element").data('bs.modal').isShown){
... 
}
</code></pre>

blocks|key|213334|text|在bootstrap-modal.js+v2.2.0上：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213335|(+$('element').data('modal')+%7C%7C+{}).isShown|code-block|syntax|javascript|213336|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

On bootstrap-modal.js v2.2.0:

<pre><code>( $('element').data('modal') || {}).isShown
</code></pre>

blocks|key|213375|text|检查模式是否已打开|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213376|$('.modal:visible').length+&&+$('body').hasClass('modal-open')|offset|length|style|CODE|213377|附加事件侦听器|213378|$(document).on('show.bs.modal',+'.modal',+function+()+{
++++//+run+your+validation...+(+or+shown.bs.modal+)
});|code-block|syntax|javascript|213379|entityMap^0|0|0|1Q|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Check if a modal is open

<code>$('.modal:visible').length &amp;&amp; $('body').hasClass('modal-open')</code>

To attach an event listener

<pre><code>$(document).on('show.bs.modal', '.modal', function () {
 // run your validation... ( or shown.bs.modal )
});
</code></pre>

blocks|key|213424|text|您还可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213425|$('#myModal').hasClass('show');|code-block|syntax|javascript|213426|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can also use

<pre><code>$('#myModal').hasClass('show');
</code></pre>

blocks|key|213464|text|当它可以用简单的jQuery来完成时，为什么要把事情复杂化呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213465|$('#myModal').on('shown.bs.modal',+function+(e)+{
++++console.log('myModal+is+shown');
++++//+Your+actual+function+here
})|code-block|syntax|javascript|213466|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Why complicate things when it can be done with simple jQuery like following.

<pre><code>$('#myModal').on('shown.bs.modal', function (e) {
 console.log('myModal is shown');
 // Your actual function here
})
</code></pre>

blocks|key|213545|text|通过ID检查任何特定模型状态的JavaScript方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213546|modalstate+=+document.getElementById('modal-id').classList.contains('show')|code-block|syntax|javascript|213547|如果特定的modal+id是打开的，则返回true。|213548|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

JavaScript Approach to check for any particular model state by its ID.
<pre><code>modalstate = document.getElementById('modal-id').classList.contains('show')
</code></pre>
This will returns true if particular modal-id is open.

blocks|key|213665|text|当modal为open(在正文中)或close+(结果为假)时，此代码指示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213666|var+trueFalse+=+($('body').hasClass('modal-open'));|code-block|syntax|javascript|213667|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

this code indication, when modal is open(in body), or close (result false)
<pre><code>var trueFalse = ($('body').hasClass('modal-open'));
</code></pre>

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.
So I want to ad a jquery if modal is open so the i do validate, is this possible?
<pre><code>&lt;script&gt;
$(document).ready(function(){

var validator =$('#form1').validate(
 {
 ignore: &quot;&quot;,
 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($(&quot;.tab-content&quot;).find(&quot;div.tab-pane.active:has(div.has-error)&quot;).length == 0)
 {
 $(&quot;.tab-content&quot;).find(&quot;div.tab-pane:hidden:has(div.has-error)&quot;).each(function(index, tab)
 {
 var id = $(tab).attr(&quot;id&quot;);
 
 $('a[href=&quot;#' + id + '&quot;]').tab('show');
 });
 }
 },
 unhighlight: function(element) {
$(element).closest('.grupo').removeClass('has-error');
 }
 });

}); // end document.ready

&lt;/script&gt;
</code></pre>

How to check if bootstrap modal is open, so I can use jquery validate?

jQuery

只有当模式打开时，我才需要进行验证，因为如果我打开它，然后关闭它，然后我按下打开该模式的按钮，它将不起作用，因为它正在进行jquery验证，但不会显示，因为该模式已被清除。所以，如果modal是打开的，那么我想添加一个jquery，这样我就可以验证了，这是可能的吗？<script>$(document).ready(f...

问如何检查bootstrap模式是否打开，以便可以使用jquery验证？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检查bootstrap模式是否打开，以便可以使用jquery验证？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检查bootstrap模式是否打开，以便可以使用jquery验证？
EN