Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- joomla:modalbox [30/07/2020 15:19] – Manuel
+++ joomla:modalbox [31/07/2020 11:15] (aktuell) – Manuel
@@ Zeile 3: / Zeile 3: @@
 Wie stelle ich es an, dass gewisse Inhalte einer Komponente in einer Modalbox angezeigt werden?
-====Inhalt der Modalbox====
+===== Inhalt der Modalbox =====
-Der Inhalt der Modalbox kann zum Beispiel mit einer eigenen Komponenten-View gefüllt werden.
+Der Inhalt der Modalbox kann zum Beispiel mit einer eigenen Komponenten-View gefüllt werden.\\
 Dazu werden folgende Dateien benötigt:
-views/testview/view.raw.php
+views/testview/view.raw.php\\
 views/testview/tmpl/modalbox.php
@@ Zeile 64: / Zeile 63: @@
 <p>Inhalt der Modalbox</p>
 </file>
+\\
+\\
+===== Aufrufen der Modalbox =====
-====Aufrufen der Modalbox====
+==== Mootols: Modalbox ====
-In diesem Beispiel wird die Modalbox in einer Komponenten-View, in dessen tmpl-file aufgerufen, indem auf den Link mit "Open Modalbox" geklickt wird.
 <file php default.php>
@@ Zeile 85: / Zeile 85: @@
 </file>
-Damit wird die Modalbox Funktionalität hinzugefügt
+==== Bootstrap: Modalbox ====
+https://getbootstrap.com/docs/4.0/components/modal/
+<file php default.php>
+<?php
+use \Joomla\CMS\Router\Route;
+.
+.
+.
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#bootstrapModalbox">
+  Bootstrap: Modalbox
+</button>
+<!-- Modal-Box -->
+<div class="modal hide fade jviewport-width80 in" id="bootstrapModalbox" tabindex="-1" aria-labelledby="bootstrapModalboxTitle" aria-hidden="true">
+  <div class="modal-header">
+    <button type="button" class="close novalidate" data-dismiss="modal" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+    <h3 id="bootstrapModalboxTitle">Modalbox title</h3>
+  </div>
+  <div class="modal-body">
+    <iframe class="iframe" src="<?php echo Route::_('index.php?option=com_attlist&view=meldungform&format=raw&layout=modal_success'); ?>" name="iframe name"></iframe>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+    <button type="button" class="btn btn-primary">Save changes</button>
+  </div>
+</div>
+</file>