Bootstrap modal window inside another div

Question

My bootstrap modal is working fine. My problem is that I need the modal window (including the gray background) to be applied on a div from the website and not on the body.

Answer 1

Here's an example I just did using your code and doing little tweaks to it.

Click here and watch it working

How to solve it:

$(function () {
  
  //getting click event to show modal
    $('#submit-button').click(function () {
        $('#dialog_confirm_map').modal();
      
      //appending modal background inside the bigform-content
        $('.modal-backdrop').appendTo('.bigform-content');
      //removing body classes to enable click events
        $('body').removeClass();
    });

  
  //just to prove actions outside modal
    $('#help-button').click(function () {
        alert("Action with modal opened or closed");
    });
  //end just to prove actions outside modal
});

.bigform-content {
    border: solid 5px #DDD;
    margin: 30px 20px;
    overflow: hidden;
    padding:20px;
    position:relative;
}
.modal, .modal-backdrop {
    position: absolute !important;
}
.bigform-content h1 {
    margin:0;
}
.bigform-content input[type=submit] {
    margin-top:10px;
}

    

         
Hi, this is my form title

    
    

        
This is my form
        Field 1:
        
        Field 2:
        
        Field 1:
        
        
    
    
    

        

            

                

                    
You didn't move the map pin, are you sure it is on your address/house?
                
                
 No, I'll do it now 
 Yes, I am sure

                
            
            
        
        
    
    

Content outside div and modal
Hope it