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.
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>