0

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>
Community
  • 1
  • 1
Gaurang Patel
  • 4,310
  • 6
  • 27
  • 32

1 Answers1

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();
 })
Meenesh Jain
  • 2,532
  • 2
  • 19
  • 29
  • Well.. I tried that but doesn't seem to be working.. Please check here at http://jsfiddle.net/h3WDq/718/ – Gaurang Patel Aug 06 '15 at 12:14
  • I checked your fiddle its working perfectly there might be some error in your code or your modal might be having any conflicts with other js component, take a look at this http://jsfiddle.net/meeneshjain/xwnLc8pa/1/ – Meenesh Jain Aug 06 '15 at 12:30
  • In Fiddle, one condition is full-filled and that is, Modal is not getting closed while clicking outside. But background is still disabled. – Gaurang Patel Aug 06 '15 at 12:33
  • In other words, I am not able to write something in the text box when popup is enabled.. I also try with data-backdrop="false" – Gaurang Patel Aug 06 '15 at 12:37
  • then you need some custom code for manipulating the css and the html dom content, see i have made some changes to my answer – Meenesh Jain Aug 06 '15 at 12:38
  • We are getting close.. Black background is gone but still I notice that I am not able to write anything in the text box.. I appreciate your effort btw.. – Gaurang Patel Aug 06 '15 at 12:48