Werthe Experten,
ich stelle gerade meine Anwendung auf Bootstrap und jquery stellenweise um.
Meine Anwendung hat bislang popups mit NEXT-Buttons verwendet. Mit dem NEXT-Button bin ich dann immer von Seite zu Seite gesprungen.
Nun soll mit Bootstrap alles schöner, einfacher und schneller werden. Da ich aber wenig bis keine Ahnung davon habe, bin ich nun hier um mir Hilfe von Euch zu holen.
Zum Problem:
Ich habe eine Hauptseite mit einem iFrame.
Über die angezeigten Seite im iFrame öffne ich eine neue Seite in einem modal mit Bootstrap und jquery was auch ganz gut klappt. Nun habe ich in dem modal ein Formular mit einem Next-Button, über den ich nun zur nächsten Seite springen möchte. Diese neue Seite öffne ich wiederum per load(‚Seite2.php‘) in dem modal. In der Hauptseite habe ich dafür eine Modalstruktur hinterlegt. Die Seite2.php in dem neuen Modal öffnet sich ebenfalls.
Insgesamt habe ich 5 Seiten die ich innerhalb eines bestimmten Bearbeitungsprozesses nacheinander per NEXT-Link-Button öffnen möchte.
Für jede dieser 5 Seiten habe ich in der Hauptseite eine Modal-Struktur hinterlegt. Ob das notwendig ist, weiss ich leider nicht. Ich habe es mit einer Modal-Struktur versucht, jedoch ohne Erfolg.
Leider kann ich von den 5 Seiten nur 2 öffnen. Dann öffnet sich der Modal leider nicht mehr. Es öffnet sich zwar das Backdrop aber kein Modal mit der darin befindlichen Seite.
Irgendetwas mache ich also total falsch.
Das sind die eingebundenen bootstrap und jquery plugins
<!-- Bootstrap CSS and JS-Files -->
<link rel="stylesheet" href="../includes/js_includes/bootstrap/mask_navig/bootstrap-3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="../includes/js_includes/bootstrap/mask_navig/bootstrap-3.3.5/css/bootstrap-theme.min.css">
<script src="../includes/js_includes/bootstrap/mask_navig/jquery-1.11.0/jquery-1.11.0.min.js"> </script>
<script src="../includes/js_includes/bootstrap/mask_navig/jquery-1.2.1/jquery-migrate-1.2.1.min.js"> </script>
<script src="../includes/js_includes/bootstrap/mask_navig/jquery-ui-1.11.0/jquery-ui.min.js"> </script>
<script src="../includes/js_includes/bootstrap/mask_navig/bootstrap-3.3.5/js/bootstrap.min.js"></script>
Hier der jquery-Code zum Öffnen der Modals, der sich auf jeder zu öffnenden Seite befindet:
<script type="text/javascript">
$(document).ready(function(e){
$('.ls-modal').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
alert("Check 0");
window.parent.$('#Seite1').modal({
show: true,
keyboard: true,
backdrop: false
}).find('.modal-content').load(url).draggable({
handle: ".modal-header"
});
});
});
</script>
Hier die Modal-Strukturen in der Hauptseite
<div id="Seite1" class="modal fade modal-transparent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-background">
<div class="modal-header modal-header-info"></div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div id="Seite2" class="modal fade modal-transparent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-background">
<div class="modal-header modal-header-info"></div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div id="Seite3" class="modal fade modal-transparent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-background">
<div class="modal-header modal-header-info"></div>
<div class="modal-body">
</div>
</div>
</div>
</div>
....etc bis Seite 5
Kurz zusammengefasst
Zwei Modals kann ich öffnen aber der Rest lässt sich nicht öffnen.
Was mache ich falsch?
Besten Dank für jegliche Hilfestellungen und viele Grüße
Mo