j-Modal

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Je jednoduchou alternatívou k j-Form.

Funguje iba so +v17
Komponent presúva obsah tohto komponentu pod tag <body> (kvôli polohovaniu)

Konfigurácia:

modálny názov title {String} (nahrádza HTML v prvku označenia v hlavičke)
width {Number} modálna max-šírka
if {String} podmienka pre zobrazenie modálu, je porovnaná s hodnotou v rámci path
icon {String} Celková ikona bez ti-
reload {String} prepojenie na globálnu function(modal_component) a vykoná sa, ak sa formulár zobrazuje
submit {String} prepojenie na globálnu function(hide) a vykoná sa po stlačení tlačidla Odoslať
cancel {String} prepojenie na globálnu function(hide) a vykoná sa, ak stlačíte tlačidlo Zrušiť
enter {Boolean} automaticky zachytí kľúč enter a odošle (predvolené: false)
center {Boolean} vycentruje formulár do stredu obrazovky
autofocus {Boolean/String} môže zamerať vstup. String === jQuery selector pre vstup
default {String} krátky alias pre DEFAULT(default, true)
zindex {Number} môže ovplyvniť z-index (predvolené: 12)
align {Number} zarovnáva modálne 0 na stred (predvolené), 1 vpravo dole, 2 vľavo dole, 3 vľavo hore, 4 vpravo hore
height {Number} a min. výška, ak má obsah menšiu veľkosť ako je definovaná height
NEW bg {Boolean} môže povoliť/zakázať vrstvu pozadia (predvolené: true)
NEW scrollbar {Boolean} môže povoliť/zakázať posuvník (predvolené: false)

Je dobré vedieť:

Obsah j-Modal je rozdelený na 3 časti: header, body a footer. Každá časť musí byť definovaná. Komponent pridáva do každej časti triedy CSS, napríklad prvá div bude obsahovať ui-modal-header, druhá ui-modal-body a tretia ui-modal-footer.

Tento komponent podporuje dynamické vyhodnocovanie obsahu <script type="text/html">. Príklad nižšie obsahuje skript s HTML a komponent vyhodnotí obsah, ak sa zobrazí j-Modal (iba raz).

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

Použite ho so <ui-component name="modal">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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>