How to open a modal into a specific div
In this Blog we will know that how to open bootstrap modal into a specific div.
Sometimes you need that particular bootstrap modal need to be open into a particular div, so for that purpose you have to follow these step.
Sometimes you need that particular bootstrap modal need to be open into a particular div, so for that purpose you have to follow these step.
Assume we have following code structure:
<button id="btn">Open Modal</button> <div class="orange section"> </div> <div class="red section"> </div>
Now we want that bootstrap modal need to open into red section div, on click of the button.
so for the solution we need to follow the below steps.
- Insert bootstrap modal HTML into red section
<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">×</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>
2. Write the following css into your style sheet.
.orange
{
background-color:orange;
}
.red
{
background-color:red;
position:relative;// so that .modal & .modal-backdrop gets positioned relative to it
}
.section
{
width:100%;
height:200px;
}
.modal, .modal-backdrop {
position: absolute !important;
}
3. Now write the following script into before the closing of <body> tag.
<script>
$(document).ready(function(){
$("body").on("click","#btn",function(){
$("#myModal").modal("show");
//appending modal background inside the red section
$('.modal-backdrop').appendTo('.red');
//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","");
});
});
</script>
Comments
Post a Comment