abu
Oct 30, 2016, updated at Nov 02, 2016 (UTC)
view2464
view5
0
Goto Top

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

GermanQuestionJavaScriptDevelopment
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:

1

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:

2

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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 319589

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

Printed on: April 25, 2024 at 16:04 o'clock

5 Comments
Latest comment
Goto Top
Member: IrunGoldstein
Solution IrunGoldstein Oct 30, 2016 at 17:50:39 (UTC)
Goto Top
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 face-wink

Grüße
Member: Abu
Abu Oct 30, 2016 at 18:15:45 (UTC)
Goto Top
kommt der HTML-Teil des Modals auch auf die Hauptseite, wo der iFrame initiiert wird?
Member: IrunGoldstein
Solution IrunGoldstein Oct 30, 2016 at 18:26:51 (UTC)
Goto Top
Der kann bleiben wo er ist, da du nur die "Ausgabe" verschiebst in das "darüber" liegende Fenster.
Member: Abu
Abu Oct 30, 2016 updated at 19:07:31 (UTC)
Goto Top
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.
Member: Abu
Abu Nov 02, 2016 at 09:18:32 (UTC)
Goto Top
Die Lösung ist leider noch offen.

Irgendwo steckt noch der Fehler und ich finde ihn leider nicht.
GermanQuestionJavaScriptDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 Comments