# j-FixedModal

> Il contenuto del j-FixedModal è suddiviso in 3 parti: capo, corpo e piede. Ogni parte deve essere definita. Il componente aggiunge classi CSS a ciascuna parte, ad esempio il primo div contiene ui-fixedmodal

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: 62f3eeca89cb3bfe6be5c9bd4cf8d34c5617cd892b3043b6563cbae644dc709c
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Funziona solo con `+v17`
- Il componente sposta il contenuto di questo componente sotto la tag `<body>` (a causa della posizione)


__Configurazione__:

- `width {Number}` di larghezza massima
- `if {String}` condizione per la mostra del modale, è paragonato al valore all'interno di `path`
- `reload {String}` è collegato a una funzione globale e viene eseguito se il modulo mostra
- `submit {String}` è collegato a una funzione globale e viene eseguito se il pulsante di presentazione viene premuto
- `cancel {String}` è collegato a una funzione globale e viene eseguito se il pulsante di cancellazione viene premuto
- `enter {Boolean}` cattura automaticamente la chiave `enter` e esegue la presentazione (default: `false`)
- `autofocus {Boolean/String}` può concentrare un input. `String` === `jQuery selector` per l'ingresso
- `default {String}` un breve alias per `DEFAULT(default, true)`
- `zindex {Number}` può influenzare l'indice z (default: `12`)

__Buono sapere__:

Il contenuto del `j-FixedModal` è suddiviso in 3 parti: `header`, `body` e `footer`. Ogni parte deve essere definita. il componente aggiunge classi CSS a ciascuna parte, ad esempio il primo `div` contiene `ui-fixedmodal-header`, secondo `ui-fixedmodal-body` e terzo `ui-fixedmodal-footer`.

---

Questo componente supporta una valutazione dinamica del contenuto di `<script type="text/html">`. L'esempio qui sotto contiene uno script con HTML e il componente valuta il contenuto se il j-Modal sarà visualizzato (solo una volta).

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

Utilizzare con `<ui-component name="fixedmodal">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>
```