2012-04-23 19 views
23

Hier ist mein Szenario: Ich öffne ein modales Fenster mit einigen Datensatzdetails, und ich habe eine Schaltfläche "Löschen". Wenn der Benutzer auf diese Schaltfläche klickt, muss ich ein "Bestätigungsmodal" über/über dem vorhandenen Modal anzeigen (fragend "Bist du sicher?"), Aber wenn dieses Bestätigungsmodal angezeigt wird, blockiert es nicht zuerst die "Details" modal (hinten).Twitter Bootstrap - offen Modal über ein bereits geöffnetes Modal

Weiß jemand, wie kann ich es tun?

Danke!

+3

Es scheint, dass es in der Art und Weise einer tatsächlichen Antwort ist nicht viel, aber diese Erweiterung des modal Klasse könnte der Weg zu gehen: https://github.com/jschr/bootstrap-modal –

+0

Ein Arbeitsbeispiel bei http://bootply.com/lvKQA2AM28 gefunden werden kann – CrandellWS

+0

ich das gleiche Problem hier antwortete: http://stackoverflow.com/questions/19528173/bootstrap-open-another-modal-in-modal/32513228 –

Antwort

9

verstecken Einfach #modal und Show # modal2 wenn Klick auf #deleteButton

$("#deleteButton").click(function() { 
$('#myModal').modal('hide') 
$('#myModal2').modal('show')  
}); 

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/baptme/nuUzN/14/

+0

Das Scrollen funktionierte nicht auf dem zweiten Modal, wenn die Höhe lang ist. – Giraldi

+0

Sie sollten erkennen, wenn das alte Modal zuerst schließt, bevor das neue Modal ausgeführt wird ... Hier war meine Lösung: http://StackOverflow.com/a/30250853/851045 – Giraldi

16

Es ist ganz einfach, es zu tun. Links in der bereits geöffneten modalen so aussehen haben:

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

Daten entlassen = "modal" -> wird diese modal schließen = das ist der Trick !!!!
Daten-Toggle = "modal" -> wird neuer Dialog

Genießen Sie öffnen!

+1

Dies beantwortet die Frage nicht. – darksky

+1

Das hat die Frage beantwortet! Der Link innerhalb des ersten Modals sollte sein: Link

+2

Das Scrollen funktionierte nicht auf dem zweiten Modal, wenn die Höhe lang ist, soweit ich weiß. – Giraldi

13

Alles, was Sie tun müssen, ist die Markierung für das Bestätigungsmodal unten im Code als die Details modal.

+2

Und das funktioniert! Vielen Dank. –

+1

Dies ist die wahre Lösung für diese Frage, danke. –

+0

Die einfachste, die für mich funktioniert. – Mehari

4

Wie wäre es, einen Z-Index zum zweiten Modal hinzuzufügen? Wie:

<div class="modal fade" style="z-index:1050">modal content here...</div> 

Wenn der Wert 1050 nicht funktioniert versuchen, eine höhere Anzahl aka 99999

+1

z-index = 1050 ID-Standardwert. Ich habe den Z-Index meines zweiten Modals auf 1051 geändert und es funktioniert. – Strabek

+0

Schnelle Lösung. – Avinash

Verwandte Themen