Bootstrap Modal with active background and should

问题:

I am designing a Modal that stick to the bottom of the Mobile screen to give user some tips. So essentially that (non intrusive kind of) Modal should have two properties,

• Active background (User continue doing what she wants and should not be forced to read)
• Modal should not be closed when tapped/clicked outside

I am able to achieve either of the behaviors but not both at the same time. I referred this and this but no luck so far..

I am using Bootstrap 3.3.5. Here is the JSFiddle..

<!-- Button to trigger modal -->
<a href="#myModal" role="button" data-backdrop="static" data-keyboard="false" class="btn" data-toggle="modal">Launch Modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-body">        
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   Modal Test
  </div>
</div>

回答1:

add a attribute in your modal trigger a as data-backdrop="static" and data-keyboard="false"

  <a id="idModal" class="modal"  data-backdrop="static" data-keyboard="false" href="#">

this will keep it alive if clicked outside the modal

remove this div from the page when you click on a

 $("#idModal").on("click",function(){   

   // div that we need to remove 
   //  <div class="modal-backdrop fade in"></div>
        $("div.modal-backdrop").remove();
 })