Zend Zend - 1 year ago 85
Javascript Question

Bootstrap confirm modal bihaind main modal

I have image gallery with comments. That image is opened in modal.
When i try to remove image comment i open new confirm modal. Problem is becouse that confirm modal goes bihaind the main modal. Check screenshot

Number 1 is main modal. on click

inside on comment i open number 2 modal but he is bihaind.

enter image description here

I try to put that delete modal first with
but not work

#confirm-delete {
z-index: 1000 !important;

Answer Source

Never manually set a modal's z-index!

The problem occurred because Bootstrap doesn't order the modals' z-index by default.

I personally use this: http://jschr.github.io/bootstrap-modal It made Bootstrap modals so much better with little configuration. And it is stackable, it might just be the best way to solve your problem.

I'm assuming you are using Bootstrap 3, the following code will do well.

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" />
<link href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.js"></script>

Load the CSS resources in this order, the plugin will automatically manage the z-index of modals.