Bootstrap 3 - Modaler Dialog aus iFrame öffnen und über das gesamte Browserfenster laden

Hallo liebe Freunde,

ich habe ein erneutes Bootstrap 3 Problem und benötige noch mal Eure Hilfe.

Ich habe eine Seite mit einem iFrame darin enhalten, in dem eine weitere Seite mit einer Liste geladen wird. Siehe folgendes Foto:

In der Seite, die in diesem iFrame geladen wird, möchte ich nun einen modalen Dialog anzeigen, was auch kein Problem ist. Siehe das folgende Foto:

Nun reicht der modale Dialog lediglich bis zum oberen Rand des iFrame-Fensters.
Ich möchte jedoch, dass der der modale Dialog über das iFrame-Fenster hinaus reicht bis zum oberen Rand des Browsers.

Frage:
Geht das???

Besten Dank im Voraus für jegliche Unterstützung.

Beste Grüße

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 319589

Url: https://administrator.de/contentid/319589

Ausgedruckt am: 23.11.2024 um 10:11 Uhr

5 Kommentare

Neuester Kommentar

Hi Abu,

short: Ja es geht!

long:

Du musst in deinem speziellen Fall den Dialog im "Hauptfenster" erzeugen aber nicht öffnen, in deinem IFrame öffnest du dann den Dialog und nutzt zum Darstellen das vorbereitete Modal Dialog im "Hauptfenster". Somit kannst du den Inhalt außerhalb des IFrames Darstellen denn sonst ist alles auf den Ausschnitt beschränkt wie du es ja schon gemerkt hast.

Bsp.:

"Hauptseite" Dialog vorbereiten aber nicht öffnen:

$("#dialog").dialog({ autoOpen: false });

Im IFrame dann:

parent.$("#dialog").dialog("open");

Mit dem vorangestellten parent. greifst du auf das erzeugte aber nicht geöffnete Modal Dialog zu.

ID und Bezeichnungen musst natürlich noch an deine Umgebung anpassen eventuell steht da auch noch mehr bei dir drin

Grüße

kommt der HTML-Teil des Modals auch auf die Hauptseite, wo der iFrame initiiert wird?

Der kann bleiben wo er ist, da du nur die "Ausgabe" verschiebst in das "darüber" liegende Fenster.

Also ... ich habe nun folgendes vorbereitet:

Im Hauptfenster:

<!-- loading Bootstrap -->
<link rel="stylesheet" href="../includes/js_includes/bootstrap/mask_navig/3.1.1/css/bootstrap.min.css">  
<!-- Optionales Theme -->

<link rel="stylesheet" href="../includes/js_includes/bootstrap/mask_navig/3.1.1/css/bootstrap-theme.min.css">  
<!-- ENDE loading Bootstrap -->

<script src="http://code.jquery.com/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/3.1.1/js/bootstrap.min.js"></script>   

und ganz unten im Hauptfenster vor </body> kommt folgendes Dialog-Gerüst:

<div class="modal fade" id="meinModal" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel" aria-hidden="false">  
  <div class="modal-dialog">  
    <div class="modal-content mod-background">  

      <div class="modal-header">  
        <button type="button" class="close" data-dismiss="modal" aria-hidden="false">x</button>  
        <h4 class="modal-title" id="meinModalLabel"></h4>  
      </div>

	      <div class="modal-body bg-primary">  
	
	      </div>

      <div class="modal-footer">  
        <a href="#" id="Reset" class="btn btn-primary">Close</a><button id="next" type="button" class="btn btn-primary">Next</button>  
      </div>

    </div>
  </div>
</div>

In dem file, von dem aus der Dialog per Remote-Link geöffnet werden soll steht nun folgendes:

<head>
<!-- loading Bootstrap -->
<link rel="stylesheet" href="../includes/js_includes/bootstrap/mask_navig/3.1.1/css/bootstrap.min.css">  
<!-- Optionales Theme -->
<link rel="stylesheet" href="../includes/js_includes/bootstrap/mask_navig/3.1.1/css/bootstrap-theme.min.css">  

<script src="http://code.jquery.com/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/3.1.1/js/bootstrap.min.js"></script>   
<!-- ENDE loading Bootstrap -->

<script type="text/javascript">  
	parent.$("#meinModal").dialog("open");  
</script>
</head>
<body>

.
.
.
.

<?php
echo '<td align="center"><a data-toggle="modal" href="historie.php?id='.$ergebnis['id'].'&&ga='.$ergebnis['auftragsnummer'].'" data-target="#meinModal" data-backdrop="false"><img width="22px" height="22px" src="../images/app_icons/book.png"></a></td>';  
?>
.
.
.

So, wie ich es nun geschildert habe funktioniert es leider nicht.
Das Dialogfenster öffnet sich gar nicht mehr.

In der Browser-Konsole vom Firefox wird folgendes ausgegeben:
TypeError: $(...).dialog is not a function
unreachable code after return statement

Wo ist hier der Fehler?

Besten Dank im Voraus.