j-FixedModal

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Funktioniert nur mit +v17
Die Komponente verschiebt den Inhalt dieser Komponente unter das Tag <body> (aufgrund der Positionierung).

Konfiguration:

width {Number} modale maximale Breite
Bedingung if {String} für die Anzeige des Modals, es wird mit dem Wert innerhalb von path verglichen
reload {String}-Link zu einer globalen Funktion und diese wird ausgeführt, wenn das Formular angezeigt wird
submit {String}-Link zu einer globalen Funktion, die ausgeführt wird, wenn die Schaltfläche „Senden“ gedrückt wird
cancel {String}-Link zu einer globalen Funktion, die ausgeführt wird, wenn die Schaltfläche „Abbrechen“ gedrückt wird
enter {Boolean} erfasst den enter-Schlüssel automatisch und führt die Übermittlung durch (Standard: false)
autofocus {Boolean/String} kann eine Eingabe fokussieren. String === jQuery selector für die Eingabe
default {String} ein Kurzalias für DEFAULT(default, true)
zindex {Number} kann den Z-Index beeinflussen (Standard: 12)

Gut zu wissen:

Der Inhalt von j-FixedModal ist in drei Teile unterteilt: header, body und footer. Jeder Teil muss definiert werden. Die Komponente fügt jedem Teil CSS-Klassen hinzu, zum Beispiel enthält der erste div ui-fixedmodal-header, der zweite ui-fixedmodal-body und der dritte ui-fixedmodal-footer.

Diese Komponente unterstützt die dynamische Auswertung des Inhalts von <script type="text/html">. Das folgende Beispiel enthält ein Skript mit HTML und die Komponente wertet den Inhalt aus, ob j-Modal angezeigt wird (nur einmal).

<ui-component name="fixedmodal" path="path" config="config">
	<script type="text/html">
		A CONTENT
	</script>
</ui-component>

Verwenden Sie es mit <ui-component name="fixedmodal">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores illum quaerat quisquam voluptatem soluta necessitatibus accusamus possimus consequuntur nihil nam. Fugiat unde nemo, ratione magnam. Placeat minima, fugiat quo a. Esse commodi temporibus quos numquam suscipit! Mollitia accusantium temporibus nisi quibusdam alias provident rerum impedit, fuga officia non illum unde magni recusandae eos ducimus, maiores, dolore voluptates reiciendis accusamus odit quo ipsum veniam. Consectetur vitae minima dolor, possimus earum quae necessitatibus quia! Ex reiciendis nam eius adipisci harum ad. Atque fuga sint deleniti repellat quisquam. Deserunt laudantium maiores dicta, aliquid quidem id veritatis sint rem iusto. Ab similique culpa quasi!

<ui-component name="fixedmodal" path="common.form" config="if:folder;submit:folder_submit" class="hidden">

	<!-- HEADER -->
	<div>
		<i class="ti ti-folder orange"></i>
		<strong>New folder</strong>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus qui facilis magni porro reiciendis.
	</div>

	<!-- BODY -->
	<div>
		CONTENT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit illo rem dicta temporibus beatae quibusdam dolore fugit, quidem nostrum. Hic asperiores enim ipsum maxime. Hic nisi nulla iusto id commodi?
	</div>

	<!-- FOOTER -->
	<div>
		<button name="cancel">Cancel</button>
		<button name="submit"><i class="ti ti-plus"></i>Create folder</button>
	</div>

</ui-component>

<script>

	function folder_submit(hide) {
		alert('SUBMIT');
		hide();
	}

	var common = {};

	// Show the form
	common.form = 'folder';

</script>