j-FixedModal

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Fungerar endast med +v17
Komponenten flyttar innehållet i denna komponent under <body>-taggen (på grund av positionering)

Konfigurera:

width {Number} Modal max bredd
if {String} villkor för visning av modalen, det är jämfört med värdet inom path
reload {String} länkar till en global funktion och den körs om formuläret visar
submit {String} länk till en global funktion och den körs om du trycker på knappen för att lämna in
cancel {String} länkar till en global funktion och den körs om knappen avbokning trycks
enter {Boolean} fångar enter-nyckeln automatiskt och utför leverans (default: false)
autofocus {Boolean/String} kan fokusera en inmatning. String === jQuery selector för inmatningen
default {String} en kort alias för DEFAULT(default, true)
zindex {Number} kan påverka z-index (default: 12)

Bra att veta:

Innehållet i j-FixedModal är uppdelat i 3 delar: header, body och footer.Varje del måste definieras.Komponenten lägger till CSS-klasser till varje del, till exempel den första div kommer att innehålla ui-fixedmodal-header, andra ui-fixedmodal-body och tredje ui-fixedmodal-footer.

Denna komponent stöder dynamisk utvärdering av innehållet i <script type="text/html">. exemplet nedan innehåller ett skript med HTML och komponenten utvärderar innehållet om j-Modal visas (endast en gång).

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

Använd den med <ui-component name="fixedmodal">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>