# j-FixedModal

> Le contenu du j-FixedModal est divisé en 3 parties : en-tête, corps et pied de page. Chaque partie doit être définie. Le composant ajoute des classes CSS à chaque partie, par exemple le premier div contiendra ui-fixedmodal

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 810b597899ea8597a66e5bf4cf7fa1394eae0985d82622554c670dc6e9b99b34
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- 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).

```html
<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.

```html 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>
```