Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter bootstrap - open modal over an already opened modal

Tags:

Here's my scenario: I'm opening a modal window with some record details, and I've a "Delete" button. When user clicks on this button, I need to show a "confirmation" modal above/over the existing modal (asking "are you sure?"), but when this confirmation modal is showed, it doesn't block the "details" first modal (behind).

Does anyone know how can I do it?

Thanks!

like image 724
Rodrigo Pires Avatar asked Apr 23 '12 04:04

Rodrigo Pires


People also ask

Can you open a modal over a modal?

Bootstrap 4 - update 2019To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show. bs. modal .

How do I open two Bootstrap modals?

In this case, id="myModal" . You could create as many modals as you want by using this structure and making sure each button's data-target references a unique id of a modal. Show activity on this post. data-toggle="modal" : identifies the DOM object having class "modal" and toggles it on the button.

How do I transfer data from one modal to another modal?

Data can be passed to the modal body from the HTML document which gets displayed when the modal pops up. To pass data into the modal body jquery methods are used. jQuery is similar to JavaScript, however jQuery methods are simple and easier to implement. jQuery reduces the lines of code.

How do I open modal popup on modal popup?

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.


2 Answers

All you need to do is place the markup for the confirmation modal lower down in the code than the details modal.

like image 114
Rob Avatar answered Nov 16 '22 22:11

Rob


It's quite easy to do it. Links in your already opened modal have to look like this:

<a href="NEW URL" data-dismiss="modal" data-toggle="modal" data-target="#newModal">Anchor text</a> 

data-dismiss="modal" -> will close that modal = that is the trick!!!!
data-toggle="modal" -> will open new dialog

Enjoy!

like image 39
Oleg Veselkov Avatar answered Nov 17 '22 00:11

Oleg Veselkov