# j-FixedModal

> De inhoud van de j-FixedModal is verdeeld in 3 delen: hoofd, lichaam en voet. Elk deel moet worden gedefinieerd. De component voegt CSS-klassen toe aan elk deel, bijvoorbeeld de eerste div zal ui-fixedmodal bevatten

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

- Werkt alleen met `+v17`
- De component beweegt de inhoud van deze component onder het `<body>`-tag (door positionering)


__Configuratie__:

- `width {Number}` modale max-breedte
- De voorwaarde van `if {String}` voor het tonen van de modal, is vergeleken met de waarde binnen de `path`
- `reload {String}` verbinding met een wereldwijde functie en het wordt uitgevoerd als de vorm wordt weergegeven
- `submit {String}` link naar een wereldwijde functie en het wordt uitgevoerd als de submit-knop wordt gedrukt
- `cancel {String}` verbinding met een wereldwijde functie en het wordt uitgevoerd als de annuleringsknop wordt gedrukt
- `enter {Boolean}` vangt de `enter` sleutel automatisch en uitvoert de aflevering (default: `false`)
- `autofocus {Boolean/String}` kan een input richten. `String` === `jQuery selector` voor de input
- `default {String}` een korte alias voor `DEFAULT(default, true)`
- `zindex {Number}` kan z-index beïnvloeden (default: `12`)

__Goed om te weten__:

De inhoud van de `j-FixedModal` is verdeeld in 3 delen: `header`, `body` en `footer`.Elke deel moet worden gedefinieerd.De component voegt CSS-klassen toe aan elk deel, bijvoorbeeld de eerste `div` bevat `ui-fixedmodal-header`, de tweede `ui-fixedmodal-body` en de derde `ui-fixedmodal-footer`.

---

Deze component ondersteunt een dynamische evaluatie van de inhoud van `<script type="text/html">`. het onderstaande voorbeeld bevat een script met HTML en de component evalueert de inhoud als de j-Modal wordt weergegeven (alleen één keer).

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

Gebruik het met `<ui-component name="fixedmodal">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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