I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable.
Here's what it looks like:
See this fiddle for one way to reproduce this problem. The basic structure of that code is like this:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
Any ideas why this is or what I can do to fix this?
This question is related to
javascript
css
twitter-bootstrap
modal-dialog
The answer is
I had the similar issue only for iOS devices.
Solution was by removing -webkit-overflow-scrolling: touch from parent element
An other way to approach this is to remove the z-index from the .modal-backdrop in bootstrap.css. This will cause the backdrop to be on the same level as the rest of your body (it will still fade) and your modal to be on top.
.modal-backdrop looks like this
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
The problem has to do with the positioning of the parent containers. You can easily "move" your modal out from these containers before displaying it. Here's how to do it if you were showing your modal using js:
$('#myModal').appendTo("body").modal('show');
Or, if you launch modal using buttons, drop the .modal('show'); and just do:
$('#myModal').appendTo("body")
This will keep all normal functionality, allowing you to show the modal using a button.
in your navbar navbar-fixed-top need z-index = 1041
and also if u use bootstarp-combined.min.css the also change .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041
You can also remove the z-index from .modal-backdrop. Resulting css would look like this.
.modal-backdrop {
}
.modal-backdrop.in {
opacity: .35;
filter: alpha(opacity=35); }
set the z-index .modal to a highest value
For example, .sidebarwrapper has z-index of 1100, so set the z-index of .modal to 1101
.modal {
z-index: 1101;
}
I had some problem like this on Iphone and Ipad using Sharepoint 2013 Modal bootstrap keep z-index problems with backdrop.
I just use this on JS :
$('#myModal').on('shown.bs.modal', function() {_x000D_
//To relate the z-index make sure backdrop and modal are siblings_x000D_
$(this).before($('.modal-backdrop'));_x000D_
//Now set z-index of modal greater than backdrop_x000D_
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);_x000D_
}); Try overwriting the class .modal-open overflow value from hidden to visible:
.modal-open {
overflow: visible;
}
Also, make sure that version of BootStrap css and js are the same ones. Different versions can also make modal appearing under background:
For example:
Bad:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
Good:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
function addclassName(){
setTimeout(function(){
var c = document.querySelectorAll(".modal-backdrop");
for (var i = 0; i < c.length; i++) {
c[i].style.zIndex = 1040 + i * 20 ;
}
var d = document.querySelectorAll(".modal.fade");
for(var i = 0; i<d.length; i++){
d[i].style.zIndex = 1050 + i * 20;
}
}, 10);
}
In my case, I had a wrapper with the following:
.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}
Only removed the z-index:1 and have no idea why fixed the problem. also for sure removing the relative position did but I needed it.
For most people, this problem occurs when you place the modal code inside some other sections of the HTML and not right at the end of it.
It's definitely not possible to put all the modals at the end of the HTML, especially if we are doing a single page application. I fixed it by removing the backdrop from the body at modal opening, and appended it to the div above the modal:
$("#theModal").on('show.bs.modal', function(){
setTimeout(() => {
let modalBackdrop = $(".modal-backdrop");
$(".modal-backdrop").remove();
$("#anyDivAboveTheModal").append(modalBackdrop);
}, 100);
});
I added the timeout to make sure the action is performed after the backdrop actually loaded.
Check your css to see if you have any blurs and filters. I removed this code from my css and the modal worked normally again
.modal-open .main-wrapper {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
This would cover all modals without messing up any of the animations or expected behavior..
$(document).on('show.bs.modal', '.modal', function () {
$(this).appendTo('body');
});
I had same problem and also check Muhd's answer.
But, my modal needs left, top attribute, so just change fixed position to absolute and it worked.
.modal {
position: absolute;
}
Solution provided by @Muhd is the best way to do it. But if you are stuck in a situation where changing structure of the page is not an option, use this trick:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<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">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
The trick in here is data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" by removing the default backdrop and create a dummy one by setting background color of the dialog itself with some alpha.
Update 1: As pointed out by @Gustyn that clicking on the background does not close the dialog as is expected. So to achieve that you have to add some java script code. Here is some example how you can achieve this.
$('.modal').click(function(event){
$(event.target).modal('hide');
});
The solution is to put the modal directly under the body tag. If that is not possible for some reason then just add a overflow: visible property to the tag enclosing the modal, or use the following code:
<script>
$(document).on('show.bs.modal', '.modal', function () {
$('.div-wrapper-for-modal').css('overflow', 'visible');
});
$(document).on('hide.bs.modal', '.modal', function () {
$('.div-wrapper-for-modal').css('overflow', 'auto');
});
</script>
<div class="div-wrapper-for-modal">
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
The easiest solution I found, that worked for all my cases, was an answer in a similar post:
Here it is:
.modal {
background: rgba(0, 0, 0, 0.5);
}
.modal-backdrop {
display: none;
}
Basically, the original backdrop is not used. Instead you use the modal as the backdrop. The result is that it looks and behaves exactly as the original should've. It avoids all the issues with z-indexes (for me changing z-index to 0 solved the issue, but created a new problem with my nav menu being between the modal and backdrop) and is simple.
Credit goes to @Jevin O. Sewaruth for posting the original answer.
Add this to your style sheet:
.modal-backdrop {
background-color: #000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 0 !important;
}
I have a lighter and better solution..
It could be easily solve through some additional CSS styles..
hide the class
.modal-backdrop(auto generated from Bootstrap.js).modal-backdrop { display:none; visibility:hidden; position:relative }set the background of
.modalto a translucent black backdrop image..modal { background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png") // translucent image from google images z-index:1100; }
This will works best if you have a requirement that needs the modal to be inside an element and not near the </body> tag..
This behaviour sometimes occurs when there is an unclosed tag, most especially an unclosed </div>. You can review where your modal is located and ensure all tags are properly closed or better yet move the div modal closer to the bottom of the page, imediately before </body> tag enclosure
For me the easiest solution was to put my modal in a wrapper with absolute position and z-index higher than .modal-backdrop. Since modal-backdrop (at least in my case) has z-index 1050:
.my-modal-wrapper {_x000D_
position: absolute;_x000D_
z-index: 1060;_x000D_
}<div class="my-modal-wrapper"></div>I've simply set:
#myModal {
z-index: 1500;
}
and it works....
For the original question:
.my-module {
z-index: 1500;
}
I removed modal backdrop.
.modal-backdrop {
display:none;
}
This is not better solution, but works for me.
I resolved my issue by adding data-backdrop="false" to the div:
<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
.....
This worked for me:
sass:
.modal-backdrop
display: none
#yourModal.modal.fade.in
background: rgba(0, 0, 0, 0.5)
In my case, the cause was boostrap.min.css. Once I excluded it from my HTML file as a reference, the dialog showed in front of the modal shade.
I simply removed the position: fixed style from the _modal.scss file and it seems to work fine for me. I still have the background and it works as expected.
// Modal background
.modal-backdrop {
/* commented out position: fixed - bug fix */
//position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal-backdrop;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade {
opacity: 0;
}
Kudos to Rick Strahl for the guidance in "Bootstrap Modal Dialog showing under Modal Background".
Use this in your modal:
data-backdrop="false"
Add this one to you pages. It work for me.
<script type="text/javascript">
$('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
According to the previous answers this could happen for several reasons. For me the problem was referencing two different Bootstrap links without knowing, so removing one solves the problem.
In my case I included this one:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
and another offline one that I have already in my laptop.
You can make a workaround but this will remove the fade from all the page. The modal will popup like Facebook popups. After opening the modal try:
$('.modal-backdrop').removeClass('modal-backdrop');
I have also encountered this problem and none of the solutions worked for me until i figured out i actually don't need a backdrop. You can easily remove the backdrop with the folowing code.
<div class="modal fade" id="createModal" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Create Project</h4>
</div>
<div class="modal-body">Not yet made</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Note: the data-backdrop attribute needs to be set to false (other options: static or true).
$('.modal').insertAfter($('body'));
.modal-backdrop {
/* bug fix - no overlay */
display: none;}
what i find is that:
in bootstrap 3.3.0 it's not right,but when in bootstrap 3.3.5 it's right.let's see the code. 3.3.0:
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.prependTo(this.$element)
3.3.5
this.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body)
For those like me that added Bootstrap to Wordpress without the use of plugin or theme:
I added bootstrap CSS and JS in the function.php file.
Then, called the modal in a wordpress page.
No matter what I did, the .modal-backdrop kept being in fron of #mymodal. I found out that it was a z-index problem but, as #mymodal was generated inside the content div and .modal-backdrop at the end of <body>, z-index couldn't work.
What I did was moving #mymodal to the end of as well after it was generated:
$(document).ready(function () {
$('#mymodal').on('shown.bs.modal', function () {
$('#mymodal').appendTo(document.body);
})
});
By the way, I had to add shown.bs.modal inside $(document).ready because it wasn't being called when I hit the button.
Change the absolute position to relative.
.modal-backdrop {
position: relative;
/* ... */
}
I got it to work by giving a high z-index value to the modal window AFTER opening it. E.g.:
$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
Try this code to CSS.
.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }
Ex:
$(window).on('load', function() {_x000D_
_x000D_
/* Latest compiled and minified JavaScript included as External Resource */_x000D_
$(document).ready(function() { $('.modal').modal("show"); });_x000D_
_x000D_
});/* Optional theme */_x000D_
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');_x000D_
_x000D_
body {_x000D_
margin: 10px;_x000D_
padding-top: 50px;_x000D_
}_x000D_
_x000D_
.my-module {_x000D_
position: fixed;_x000D_
top: 0;_x000D_
left: 0;_x000D_
border: 1px solid red;_x000D_
}_x000D_
_x000D_
.modal-open { overflow: hidden !important; }_x000D_
.modal-open *{ position:unset; z-index: 0; }_x000D_
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }_x000D_
.modal-open .modal { position: fixed; z-index: 99999 !important; }<html><head>_x000D_
<meta http-equiv="content-type" content="text/html; charset=UTF-8">_x000D_
<title>Bootstrap 3 Template</title>_x000D_
<meta http-equiv="content-type" content="text/html; charset=UTF-8">_x000D_
<meta name="robots" content="noindex, nofollow">_x000D_
<meta name="googlebot" content="noindex, nofollow">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
_x000D_
_x000D_
<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>_x000D_
<link rel="stylesheet" type="text/css" href="/css/normalize.css">_x000D_
_x000D_
<link rel="stylesheet" type="text/css" href="/css/result-light.css">_x000D_
_x000D_
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>_x000D_
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">_x000D_
_x000D_
_x000D_
</head>_x000D_
<body class="modal-open">_x000D_
<div class="container">_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et augue sed lorem laoreet vehicula sit amet eget tortor. Donec in turpis gravida, commodo mauris ac, gravida neque. Proin eget tristique lorem. Integer tincidunt sem sit amet metus ultricies, vitae placerat dui gravida. Pellentesque viverra, nunc imperdiet egestas imperdiet, magna massa varius arcu, vitae iaculis tortor quam vitae arcu. Fusce posuere non lectus vel cursus. In rutrum sed dui non sollicitudin. Proin ante magna, imperdiet ac nisl ut, rhoncus pellentesque tortor.</p>_x000D_
_x000D_
<p>Cras ac velit vitae elit tempus tempus. Nullam eu posuere leo. In posuere, tortor et cursus ultrices, lorem lacus efficitur dolor, a aliquet elit urna sed tortor. Donec dignissim ante ex, non congue ex efficitur sit amet. Suspendisse lacinia tristique odio, vel sagittis dui tempor tempus. Quisque gravida mauris metus, sed aliquam lacus sollicitudin sit amet. Pellentesque laoreet facilisis scelerisque. Nunc a pulvinar magna. Maecenas at mollis tortor.</p>_x000D_
_x000D_
<p>Vivamus ultricies, odio sed ornare maximus, libero justo dignissim nulla, nec pharetra neque nulla vel leo. Donec imperdiet sem sem, eu interdum justo tincidunt finibus. Vestibulum lacinia diam gravida risus luctus, elementum blandit dui porttitor. Quisque varius lacus et tempor faucibus. Nam eros nunc, gravida eu tellus eget, placerat porta leo. Duis tempus ultricies felis sit amet cursus. Nunc egestas ex non lacus laoreet tincidunt. Sed malesuada placerat elementum. Mauris eu rutrum nulla. Nunc consequat lacus eget libero tincidunt, in semper eros accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu tincidunt quam, ut tincidunt eros. Donec luctus velit ac nulla lacinia malesuada.</p>_x000D_
_x000D_
<p>Vestibulum id mi in urna lacinia mollis. Pellentesque sit amet mauris ullamcorper, suscipit dolor in, lacinia leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Vivamus sollicitudin tempus massa sed molestie. Nullam quis neque vel nunc convallis porta a laoreet ex. Aliquam tempus hendrerit turpis eleifend convallis. Cras enim eros, fermentum sed velit eget, dignissim malesuada augue. Fusce ut fermentum nisl, vel imperdiet libero. Etiam luctus arcu volutpat turpis finibus pulvinar eget in augue. Integer sapien nisi, scelerisque ultrices quam sit amet, aliquam placerat neque. Morbi consequat porttitor lacus, quis pulvinar dolor aliquam ut. Ut et dolor id est iaculis lobortis nec aliquet nisl.</p>_x000D_
_x000D_
<p>Nunc et tortor cursus, ullamcorper justo vitae, ullamcorper sapien. In fringilla urna quam, et finibus ipsum finibus eu. In fermentum turpis ut eros semper, non gravida purus ornare. Praesent vehicula lobortis lacinia. Vivamus nec elit libero. Suspendisse porta neque ut erat tempor rhoncus. Nunc quis massa in ante rhoncus bibendum. Nam maximus ex vitae orci luctus scelerisque. Sed id mauris iaculis, scelerisque mauris feugiat, vehicula ipsum. Duis semper erat ac nulla sodales gravida. Suspendisse nec sapien pharetra, scelerisque odio in, dignissim erat. Aenean feugiat sagittis eros, in mattis orci tristique lacinia. Phasellus posuere id neque sed mattis. Morbi accumsan faucibus ullamcorper.</p> _x000D_
_x000D_
_x000D_
<div class="my-module">_x000D_
This is a container for "my-module" with some fixed position. The module contains the modal code._x000D_
<div class="modal fade in" aria-hidden="false" style="display: block;">_x000D_
<div class="modal-dialog">_x000D_
<div class="modal-content">_x000D_
<div class="modal-header">_x000D_
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>_x000D_
<h4 class="modal-title">Modal title</h4>_x000D_
</div>_x000D_
<div class="modal-body">_x000D_
<p>One fine body…</p>_x000D_
</div>_x000D_
<div class="modal-footer">_x000D_
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>_x000D_
<button type="button" class="btn btn-primary">Save changes</button>_x000D_
</div>_x000D_
</div><!-- /.modal-content -->_x000D_
</div><!-- /.modal-dialog -->_x000D_
</div><!-- /.modal -->_x000D_
_x000D_
</div>_x000D_
</div>_x000D_
</body></html>none of the suggested solutions above worked for me but this technique solved the issue:
$('#myModal').on('shown.bs.modal', function() {
//To relate the z-index make sure backdrop and modal are siblings
$(this).before($('.modal-backdrop'));
//Now set z-index of modal greater than backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
A but late on this but here is a generic solution -
var checkeventcount = 1,prevTarget;
$('.modal').on('show.bs.modal', function (e) {
if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
{
prevTarget = e.target;
checkeventcount++;
e.preventDefault();
$(e.target).appendTo('body').modal('show');
}
else if(e.target==prevTarget && checkeventcount==2)
{
checkeventcount--;
}
});
Visit this link - Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar for details.
Like Davide Lorigliola, I fixed it by cranking up the z-index:
.modal-backdrop { z-index: -999999; }
In my case solve it, add this in my stylesheet:
.modal-backdrop{_x000D_
z-index:0;_x000D_
}with google debugger, can examine element BACKDROP And modify attributes. Goog luck.
This problem can often be experienced when using things like gradients in CSS for things like backgrounds or even accordion headers.
Unfortunately, modifying or overriding core Bootstrap CSS is undesirable, and can lead to unwanted side effects. The least intrusive approach is to add data-backdrop="false" but you may notice that the fade effect no longer works as expected.
After following recent releases of Bootstrap, version 3.3.5 seems to resolve this issue with no unwanted side effects.
Download: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
Be sure to include the CSS files and JavaScript files from 3.3.5.
I tried all options supplied above but didn't get it to work using those.
What did work: setting the z-index of the .modal-backdrop to -1.
.modal-backdrop {
z-index: -1;
}
I had this issue and the easiest way to fix it was addind z-index greater than 1040 on the modal-dialog div:
<div class="modal-dialog" style="z-index: 1100;">
I believe bootstrap create a div modal-backdrop fade in which in my case has the z-index 1040, so if You put the modal-dialog on top of this, it should not be grey out anymore.
I was fixed this by adding style below to DIV tag
style="background-color: rgba(0, 0, 0, 0.5);"
And add custom css
.modal-backdrop {position: relative;}
Make Opacity to 1
.modal{
opacity:1;
}
Having
transform:translate3d(0, 0, 0);
On any ancestor element can cause this as well. Tested on bootstrap 4.6.0.
Remove modal-backdrop background which is set to black in your bootstrap CSS
See mine:
.modal-backdrop {
position: fixed; /*---- commented and it shows */
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
/*background-color: #000000; */
}
and then add this background color and opacity of o.5. see mine:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.5;
}
NOTE: Though these changes were made in the boostrap css, I used angular-strap and I didn't download or use the ng-animate css
CAREFUL WHEN APPENDING TO THE BODY!
This will definitely get that modal from behind the backdrop:
$('#myModal').appendTo("body").modal('show');
However, this adds another modal to the body each time you open it, which can cause head aches when adding controls like gridviews with edits and updates within update panels to the modal. Therefore, you may consider removing it when the modal closes:
For example:
$(document).on('hidden.bs.modal', function () {
$('.modal').remove();
});
will remove the the added modal. (of course that's an example, and you might want to use another class name that you added to the modal).
And as already stated by others; you can simply turn off the back-drop from the modal (data-backdrop="false"), or if you cannot live without the darkening of the screen you can adjust the .modal-backdrop css class (either increasing the z-index).
I found that by adding an inline style tag to set "display: none" prevented this problem. The position of the code did not have any effect.
Just add two lines of CSS:
.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}
The .modal-backdrop should have 1050 value to set it over the navbar.
Hi I had the same issue then I realize that when you using bootsrap 3.1 Unlike in older versions of bootsrap (2.3.2) the html structure of the modal was changed!
you must wrap your modal header body and footer with modal-dialog and modal-content
<div class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
**here goes the modal header body and footer**
</div>
</div>
</div>
Source: Stackoverflow.com