j-Modal

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

Det är ett enkelt alternativ till j-Form.

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

Konfigurera:

title {String} modaltitel (det ersätter en HTML i etikettelementet i rubriken)
width {Number} Modal max bredd
if {String} villkor för visning av modalen, det är jämfört med värdet inom path
icon {String} Total icke utan ti-
reload {String} länkar till en global function(modal_component) och det körs om formuläret visar
submit {String} länk till en global function(hide) och det körs om du trycker på knappen för inlämning
cancel {String} länk till en global function(hide) och det körs om knappen avbokning trycks
enter {Boolean} fångar enter-nyckeln automatiskt och utför leverans (default: false)
center {Boolean} fokuserar formen till mitten av skärmen
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)
align {Number} Alignera modellen 0 för att fokusera (default) 1 i höger botten, 2 Till botten, 3 Överhuvudstopp, 4 Rätt topp
height {Number} en min. höjd om innehållet har mindre storlek än definierad height
NEW bg {Boolean} kan aktivera/deaktivera ett bakgrundsskikt (default: true)
NEW scrollbar {Boolean} kan aktivera/deaktivera scrollbaren (default: false)

Bra att veta:

Innehållet i j-Modal ä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-modal-header, andra ui-modal-body och tredje ui-modal-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="modal" path="path" config="config">
	<script type="text/html">
		A CONTENT
	</script>
</ui-component>

Använd den med <ui-component name="modal">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

<ui-component name="modal" path="common.form" config="if:user;width:600;submit:usermodal_submit;icon:home" class="hidden">

	<!-- HEADER -->
	<div>
		<span class="link cancel"><i class="ti ti-times"></i></span>
		<label>Your title</label>
	</div>

	<!-- BODY -->
	<div>
		<div class="padding">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
		</div>
	</div>

	<!-- FOOTER -->
	<div>
		<span class="link cancel">Cancel</span>
		<button name="submit"><i class="ti ti-save"></i>Submit form</button>
	</div>

</ui-component>

<script>

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

	var common = {};

	// Show the form
	common.form = 'user';
</script>