j-FixedModal

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Fonctionne uniquement avec +v17
Le composant déplace le contenu de ce composant sous la balise <body> (à cause du positionnement)

Configuration :

width {Number} largeur maximale modale
Condition if {String} pour l'affichage du modal, elle est comparée à la valeur contenue dans path
reload {String} lien vers une fonction globale et il est exécuté si le formulaire est affiché
submit {String} lien vers une fonction globale et il est exécuté si le bouton de soumission est enfoncé
cancel {String} lien vers une fonction globale et il est exécuté si le bouton annuler est enfoncé
enter {Boolean} capture automatiquement la clé enter et effectue la soumission (par défaut : false)
autofocus {Boolean/String} peut focaliser une entrée. String === jQuery selector pour l'entrée
default {String} un alias court pour DEFAULT(default, true)
zindex {Number} peut affecter le z-index (par défaut : 12)

Bon à savoir :

Le contenu du j-FixedModal est divisé en 3 parties : header, body et footer. Chaque partie doit être définie. Le composant ajoute des classes CSS à chaque partie, par exemple le premier div contiendra ui-fixedmodal-header, le deuxième ui-fixedmodal-body et le troisième ui-fixedmodal-footer.

Ce composant prend en charge l'évaluation dynamique du contenu de <script type="text/html">. L'exemple ci-dessous contient un script avec HTML et le composant évalue le contenu si le j-Modal sera affiché (une seule fois).

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

Utilisez-le avec <ui-component name="fixedmodal">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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>