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. I have the following structure:

<div class="bigform-content">
    <div class="wpcol-one col-md-6">
        </div>
    <div class="wpcol-one col-md-6">
        </div>
</div>
<!-- Modal -->
        <div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">

              <div class="modal-body">
                <p>You didn't move the map pin, are you sure it is on your address/house?</p>
              </div>
              <div class="modal-footer">
                <span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>
                <span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

Now the modal window is opening correctly but I need to see it on the first div, and the other div to be click able when the modal window is open.

Can you please give me a solution for that? Thank you so much, Raluca.

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;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="bigform-content">
    <div class="wpcol-one col-md-6">
         <h1>Hi, this is my form title</h1>

    </div>
    <div class="wpcol-one col-md-6">
        <p>This is my form</p>
        <label for="field-one">Field 1:</label>
        <input id="field-one" class="form-control" type="text" />
        <label for="field-two">Field 2:</label>
        <input id="field-two" class="form-control" type="text" />
        <label for="field-three">Field 1:</label>
        <input id="field-three" class="form-control" type="text" />
        <input id="submit-button" type="submit" value="Submit my form" class="btn btn-default" />
    </div>
    <!-- Modal -->
    <div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>You didn't move the map pin, are you sure it is on your address/house?</p>
                </div>
                <div class="modal-footer"> <span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>
 <span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>
<p>Content outside div and modal</p>
<p>Hope it
    <input id="help-button" type="button" value="helps" class="btn btn-success" />
</p>

Answer 2

Thanks for the answer from wilsotobianco. For future reference I'm posting my solution as well. This works for all modals if you require multiple ones, without writing additional JS for every single modal.

Set them up like you would normally in bootstrap. The trigger simply requires the class .js-modal-rel-trigger and needs removal of the attribute data-toggle="modal" since we're toggling it with JS.

And the modal requires a custom class, in my case .modal-rel to give it a smaller z-index and position: absolute;.

The backdrop also gets the class .modal-rel-backdrop assigned for the same reason.

$('.js-modal-rel-trigger').click(function() {
    var modalId = $(this).attr('data-target');
    $(modalId).modal();

    $('.modal-backdrop').addClass('modal-rel-backdrop').appendTo($(modalId).parent());
    $('body').removeClass('modal-open');
});

body {
    background: #F3F5F6 !important;
}

.container {
    top: 50px;
    background: #fff;
    margin: 0 auto;
    width: 80%;
    padding: 20px;
    position: relative;
}

.modal.modal-rel {
    position: absolute;
    z-index: 51;
}

.modal-backdrop.modal-rel-backdrop {
    position: absolute;
    z-index: 50;
    // Fade for backdrop
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container">
    <div class="content">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
        <br> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
        <br>no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg js-modal-rel-trigger" data-target="#myModal">
        Abs. Modal
    </button>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg js-modal-rel-trigger" data-target="#mySecondModal">
        Second abs. modal
    </button>
    
        <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-target="#myNormalModal" data-toggle="modal">
        Default Modal
    </button>

    <!-- Modal -->
    <div class="modal modal-rel fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    Hi, I am positioned absolute!
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-rel fade" id="mySecondModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal Second title</h4>
                </div>
                <div class="modal-body">
                    Hi, I also am positioned absolute!
                </div>
            </div>
        </div>
    </div>
    
        <div class="modal fade" id="myNormalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Normal Modal</h4>
                </div>
                <div class="modal-body">
                    h0i. I have fixed positioning!
                </div>
            </div>
        </div>
    </div>
</div>