How to display a bootstrap modal inside a div

Here in this post we will learn how to make a bootstrap modal open inside a div.

For example

We have the following HTML Structure

<div>
  <button id="btn">Open Modal</button>
  <div class="red block">
  </div>
  <div class="blue block">     
  </div>  
</div>

Now what we need to do is to open a bootstrap modal inside the blue div on the click of a button.

So to do so follow the steps given below :-

1.  Write the HTML code for the bootstrap modal inside the blue div .

   <div>
     <button id="btn">Open Modal</button>
     <div class="red block">
     </div>
     
     <div class="blue block">
          <!-- Modal -->
       <div id="myModal" class="modal fade" role="dialog">
         <div class="modal-dialog">
   
           <!-- Modal content-->
           <div class="modal-content">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">Modal Header</h4>
             </div>
             <div class="modal-body">
               <p>Some text in the modal.</p>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
           </div>
   
         </div>
       </div>
    </div>
     
   </div>
   
   

2.  Write the following Javascript Code

   $(document).ready(function(){
       
        $("body").on("click","#btn",function(){
               
             $("#myModal").modal("show");
         
             //appending modal background inside the blue div
             $('.modal-backdrop').appendTo('.blue');   
       
             //remove the padding right and modal-open class from the body tag which bootstrap adds when a modal is shown
             $('body').removeClass("modal-open")
             $('body').css("padding-right","");     
         });
   
   });

3. Write the following CSS for it

   .red
   {
     background-color:red;
   }
   
   .blue
   {
     background-color:blue;
     position:relative;// so that .modal & .modal-backdrop gets positioned relative to it
   }
   
   .block 
   {
     width:100%;
     height:200px;
   }
   
   .modal, .modal-backdrop {
       position: absolute !important;
   }

4. That’s It

You can also visit this fiddle  for a quick working demo.