# j-FixedModal

> Innehållet i j-FixedModal är uppdelat i 3 delar: header, kropp och footer. Varje del måste definieras. Komponenten lägger till CSS-klasser till varje del, till exempel den första diven innehåller ui-fixedmodal

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

- Fungerar endast med `+v17`
- Komponenten flyttar innehållet i denna komponent under `<body>`-taggen (på grund av positionering)


__Konfigurera__:

- `width {Number}` Modal max bredd
- `if {String}` villkor för visning av modalen, det är jämfört med värdet inom `path`
- `reload {String}` länkar till en global funktion och den körs om formuläret visar
- `submit {String}` länk till en global funktion och den körs om du trycker på knappen för att lämna in
- `cancel {String}` länkar till en global funktion och den körs om knappen avbokning trycks
- `enter {Boolean}` fångar `enter`-nyckeln automatiskt och utför leverans (default: `false`)
- `autofocus {Boolean/String}` kan fokusera en inmatning. `String` === `jQuery selector` för inmatningen
- `default {String}` en kort alias för `DEFAULT(default, true)`
- `zindex {Number}` kan påverka z-index (default: `12`)

__Bra att veta__:

Innehållet i `j-FixedModal` är uppdelat i 3 delar: `header`, `body` och `footer`.Varje del måste definieras.Komponenten lägger till CSS-klasser till varje del, till exempel den första `div` kommer att innehålla `ui-fixedmodal-header`, andra `ui-fixedmodal-body` och tredje `ui-fixedmodal-footer`.

---

Denna komponent stöder dynamisk utvärdering av innehållet i `<script type="text/html">`. exemplet nedan innehåller ett skript med HTML och komponenten utvärderar innehållet om j-Modal visas (endast en gång).

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

Använd den med `<ui-component name="fixedmodal">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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