Q:

How to remove extra modal backdrop in DOM

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>

A:

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...

