Bootstrap multiple modals modal-backdrop issue
<p>I have a page where one Bootstrap modal opens another modal.</p>

<p>The problem is that with each opened modal, it adds</p>

<p><code>&lt;div class="modal-backdrop fade in"&gt;&lt;/div&gt;</code></p>

<p>to the HTML code. It's fine for the first one, but since it's <code>opacity: .5;</code> it then makes the page darker on every modal opened. Is there a way to check if a <code>modal-backdrop</code> already exists and in that case not open another one?</p>

<p>I open my modals with either</p>

<p><code>&lt;a href="" data-target="#modal_01" data-toggle="modal"&gt;Modal&lt;/a&gt;</code></p>

<p>or with jQuery:</p>

<p><code>$('#modal_01').modal('show');</code></p>

<p>Any help to this problem is greatly appreciated!</p>

<p>Here's a fiddle for your convenience: <a href="https://jsfiddle.net/zsk4econ/1/" rel="noreferrer">https://jsfiddle.net/zsk4econ/1/</a></p>