-1

quick question (hopefully?). I have a modal (click the button and the thing/content pops up) - inside the modal I have text that I wanted to have someone click and it opens another modal in front.

The intial modal is:

<button class="btn btn-two shortcode-popup-trigger" data-toggle="modal" data-target="#modal-group-5">MORE INFO</button>

Then inside I used the exact same line but changed the modal ID to the other modal I wanted to open. This works, except the new modal opens BEHIND the current one. Is anyone able to help me with this? I appreciate it!

NikkiNelson
  • 101
  • 2
  • 9

2 Answers2

2

It's the same Modal module so guessing .modal's z-index is same for both modals. Why don't you try different z-indexes for each modal?

#modal-group-4 {
    z-index: 400;
}

#modal-group-5 {
    z-index: 500;
}

If this doesn't work. Then you can try closing the first modal and then showing it back when the second modal is closed. Something like this,

To close the first modal:

<button class="btn btn-two shortcode-popup-trigger" data-toggle="modal" data-target="#modal-group-5" onclick="jQuery('#modal-group-4').modal('toggle');">MORE INFO</button>

To reopen the first modal, we need to listen for closing event of the second one,

$('#modal-group-5').on('hidden.bs.modal', function () {
    jQuery('#modal-group-4').modal('toggle');
})

Note: The above method is supported in Bootstrap 3 only. For lower versions, use this

$('#modal-group-5').on('hidden', function () {
    jQuery('#modal-group-4').modal('toggle');
})

Method # 2 Source

Junaid
  • 1,270
  • 3
  • 14
  • 33
1

In your "Html" page, make sure your "modal-group-4" modal is above the "modal-group-5". If your modal-group-5 is above modal-4 then modal-group-5 will come out behind modal-group-4.

Try that.

sebastian barron
  • 25
  • 1
  • 1
  • 6