blocks|key|4711618|text|alert($('#myModal').hasClass('in'));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4711619|如果modal是打开的，它将返回true|unstyled|4711620|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

It will return true if modal is open

blocks|key|4711631|text|文档中给出了最好的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4711632|$('#myModal').on('shown.bs.modal',+function+()+{
++//+will+only+come+inside+after+the+modal+is+shown
});|code-block|syntax|javascript|4711633|有关更多信息，请参阅http://getbootstrap.com/javascript/#modals|offset|length|4711634|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/javascript/#modals^0|0|0|A|16|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

The best method is given in the docs 

<pre><code>$('#myModal').on('shown.bs.modal', function () {
 // will only come inside after the modal is shown
});
</code></pre>

for more info refer <a href="http://getbootstrap.com/javascript/#modals">http://getbootstrap.com/javascript/#modals</a>

blocks|key|205719|text|这是一个古老的问题，但不管怎样，我在这里使用了一些东西，以防有人正在寻找相同的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205720|if+(!$('#myModal').is(':visible'))+{
++++//+if+modal+is+not+shown/visible+then+do+something
}|code-block|syntax|javascript|205721|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|$]]

its an old question but anyway heres something i used incase someone was looking for the same thing

<pre><code>if (!$('#myModal').is(':visible')) {
 // if modal is not shown/visible then do something
}
</code></pre>

blocks|key|205700|text|什么时候模式隐藏？我们像这样检查：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205701|$('.yourmodal').on('hidden.bs.modal',+function+()+{
++++//+do+something+here
})|code-block|syntax|javascript|205702|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|$]]

When modal hide? we check like this : 

<pre><code>$('.yourmodal').on('hidden.bs.modal', function () {
 // do something here
})
</code></pre>

blocks|key|205774|text|使用hasClass('in')。如果modal处于OPEN状态，它将返回true。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|205775|例如：|205776|if($('.modal').hasClass('in')){
+++//Do+something+here
}|code-block|syntax|javascript|205777|entityMap^0|2|E|Q|4|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Use <code>hasClass('in')</code>. It will return true if modal is in <code>OPEN</code> state.

E.g:

<pre><code>if($('.modal').hasClass('in')){
 //Do something here
}
</code></pre>

blocks|key|205797|text|以官方的方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205798|>+($("element").data('bs.modal')+%7C%7C+{})._isShown++++//+Bootstrap+4
>+($("element").data('bs.modal')+%7C%7C+{}).isShown+++++//+Bootstrap+<=+3|code-block|syntax|javascript|205799|使用{}是为了避免模式还没有打开的情况(它返回undefined)。您也可以将其指定为等于{isShown:+false}，以使其更有意义。|offset|length|style|CODE|205800|entityMap^0|0|0|2|2|N|9|19|G|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]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

In offical way:

<pre><code>&gt; ($("element").data('bs.modal') || {})._isShown // Bootstrap 4
&gt; ($("element").data('bs.modal') || {}).isShown // Bootstrap &lt;= 3
</code></pre>

<code>{}</code> is used to avoid the case that modal is not opened yet (it return <code>undefined</code>). You can also assign it equal <code>{isShown: false}</code> to keep it's more make sense.

blocks|key|205873|text|下面是一些自定义代码，它们为模态状态提供了更明确的命名类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205874|$('.modal').on('show.bs.modal',+function(e)
{
++++e.currentTarget.classList.add("modal-fading-in");
++++e.currentTarget.classList.remove("modal-fading-out");
++++e.currentTarget.classList.remove("modal-hidden");
++++e.currentTarget.classList.remove("modal-visible");
});

$('.modal').on('hide.bs.modal',+function(e)
{
++++e.currentTarget.classList.add("modal-fading-out");
++++e.currentTarget.classList.remove("modal-fading-in");
++++e.currentTarget.classList.remove("modal-hidden");
++++e.currentTarget.classList.remove("modal-visible");
});

$('.modal').on('hidden.bs.modal',+function(e)
{
++++e.currentTarget.classList.add("modal-hidden");
++++e.currentTarget.classList.remove("modal-fading-in");
++++e.currentTarget.classList.remove("modal-fading-out");
++++e.currentTarget.classList.remove("modal-visible");
});

$('.modal').on('shown.bs.modal',+function(e)
{
++++e.currentTarget.classList.add("modal-visible");
++++e.currentTarget.classList.remove("modal-fading-in");
++++e.currentTarget.classList.remove("modal-fading-out");
++++e.currentTarget.classList.remove("modal-hidden");
});|code-block|syntax|javascript|205875|然后，您可以使用JS和CSS轻松地针对模式的各种状态。|205876|JS示例：|205877|if+(document.getElementById('myModal').hasClass('modal-fading-in'))
{
++++console.log("The+modal+is+currently+fading+in.+Please+wait.");
}|205878|CSS示例：|205879|.modal-fading-out,+.modal-hidden
{
++++opacity:+0.5;
}|205880|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Here's some custom code that gives the modal states more explicitly named classes:
<pre><code>$('.modal').on('show.bs.modal', function(e)
{
 e.currentTarget.classList.add(&quot;modal-fading-in&quot;);
 e.currentTarget.classList.remove(&quot;modal-fading-out&quot;);
 e.currentTarget.classList.remove(&quot;modal-hidden&quot;);
 e.currentTarget.classList.remove(&quot;modal-visible&quot;);
});

$('.modal').on('hide.bs.modal', function(e)
{
 e.currentTarget.classList.add(&quot;modal-fading-out&quot;);
 e.currentTarget.classList.remove(&quot;modal-fading-in&quot;);
 e.currentTarget.classList.remove(&quot;modal-hidden&quot;);
 e.currentTarget.classList.remove(&quot;modal-visible&quot;);
});

$('.modal').on('hidden.bs.modal', function(e)
{
 e.currentTarget.classList.add(&quot;modal-hidden&quot;);
 e.currentTarget.classList.remove(&quot;modal-fading-in&quot;);
 e.currentTarget.classList.remove(&quot;modal-fading-out&quot;);
 e.currentTarget.classList.remove(&quot;modal-visible&quot;);
});

$('.modal').on('shown.bs.modal', function(e)
{
 e.currentTarget.classList.add(&quot;modal-visible&quot;);
 e.currentTarget.classList.remove(&quot;modal-fading-in&quot;);
 e.currentTarget.classList.remove(&quot;modal-fading-out&quot;);
 e.currentTarget.classList.remove(&quot;modal-hidden&quot;);
});
</code></pre>
You can then easily target the modal's various states with both JS and CSS.
JS example:
<pre><code>if (document.getElementById('myModal').hasClass('modal-fading-in'))
{
 console.log(&quot;The modal is currently fading in. Please wait.&quot;);
}
</code></pre>
CSS example:
<pre><code>.modal-fading-out, .modal-hidden
{
 opacity: 0.5;
}
</code></pre>

blocks|key|205846|text|使用Bootstrap+4：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205847|if+($('#myModal').hasClass('show'))+{
++++alert("Modal+is+visible")
}|code-block|syntax|javascript|205848|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|$]]

With Bootstrap 4:

<pre><code>if ($('#myModal').hasClass('show')) {
 alert("Modal is visible")
}
</code></pre>

blocks|key|4711700|text|if($('.modal').hasClass('in'))+{
++++alert($('.modal+.in').attr('id'));+//ID+of+the+opened+modal
}+else+{
++++alert("No+pop-up+opened");
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4711701|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>if($('.modal').hasClass('in')) {
 alert($('.modal .in').attr('id')); //ID of the opened modal
} else {
 alert("No pop-up opened");
}
</code></pre>

blocks|key|205910|text|我试着像这样使用函数，然后如果需要，就调用this函数。一直在为我工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205911|function+modal_fix()+{
var+a+=+$(".modal"),
++++b+=+$("body");
a.on("shown.bs.modal",+function+()+{
++++b.hasClass("modal-open")+%7C%7C+b.addClass("modal-open");
});
}|code-block|syntax|javascript|205912|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|$]]

I try like this with function then calling if needed a this function. Has been worked for me.
<pre><code>function modal_fix() {
var a = $(&quot;.modal&quot;),
 b = $(&quot;body&quot;);
a.on(&quot;shown.bs.modal&quot;, function () {
 b.hasClass(&quot;modal-open&quot;) || b.addClass(&quot;modal-open&quot;);
});
}
</code></pre>

blocks|key|4711920|text|这解决了您的问题，如果为true，则不刷新，如果为false，则刷新|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4711921|var+truFalse+=+$('body').hasClass('modal-open');|code-block|syntax|javascript|4711922|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 resolved your problems, if true no refresh, and false refresh
<pre class="lang-js prettyprint-override"><code>var truFalse = $('body').hasClass('modal-open');
</code></pre>

Can I check if Bootstrap Modal currently Shown / Hidden Programatically? 

Like <code>bool a = if("#myModal").shown();</code> ?

I need true/false

Can I check if Bootstrap Modal Shown / Hidden?

我可以检查Bootstrap Modal当前是否以编程方式显示/隐藏吗？就像bool a = if("#myModal").shown();一样？我需要true/false

问是否可以检查Bootstrap Modal是否显示/隐藏？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以检查Bootstrap Modal是否显示/隐藏？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以检查Bootstrap Modal是否显示/隐藏？
EN