How to remove extra modal backdrop in DOM

Question

I have a page where in a pop up modal is displayed with the back drop faded. Within this modal is a link described in html as <a href="#" data-toggle="modal" data-target="blah"> show </div> Consider blah to be a div that has hidden=true initially and located within this modal. On clicking the link there seems to be another modal backdrop fade added into the DOM. When i click outside the pop up only one of them is removed while another remains and thus the web page is still faded.

Why is this happening and how do I get rid of this.

Sample code can be found in jsfiddle (note: the close button is not of concern since that seems to remove all backdrop fade from dom in my actual code. I only want to know how to make it work when i click outside the box)

Btn 3

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <a href="#" data-toggle="modal" data-target="#ref">save</a>
<div id="ref" hidden="true">
    <p>hi</p>
    </div>
</div>
</div>

Answer 1

Your answer is the property data-backdrop="false"

From the bootstrap docs you can see a property that permit a disable of the back drop.

<a href="#" data-toggle="modal" data-backdrop="false" data-target="#ref">save</a>

<div id="ref" hidden="true">
  <p>hi</p>
</div>

Take a look in more details here , using the jsbin.com, that's for me is the best tool to write js code on entire web.

I hope this help you...