# j-FixedModal

> Der Inhalt des j-FixedModal ist in drei Teile unterteilt: Kopfzeile, Hauptteil und Fußzeile. Jeder Teil muss definiert werden. Die Komponente fügt jedem Teil CSS-Klassen hinzu, zum Beispiel enthält das erste Div ui-fixedmodal

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

- Funktioniert nur mit `+v17`
- Die Komponente verschiebt den Inhalt dieser Komponente unter das Tag `<body>` (aufgrund der Positionierung).


__Konfiguration__:

- `width {Number}` modale maximale Breite
- Bedingung `if {String}` für die Anzeige des Modals, es wird mit dem Wert innerhalb von `path` verglichen
- `reload {String}`-Link zu einer globalen Funktion und diese wird ausgeführt, wenn das Formular angezeigt wird
- `submit {String}`-Link zu einer globalen Funktion, die ausgeführt wird, wenn die Schaltfläche „Senden“ gedrückt wird
- `cancel {String}`-Link zu einer globalen Funktion, die ausgeführt wird, wenn die Schaltfläche „Abbrechen“ gedrückt wird
- `enter {Boolean}` erfasst den `enter`-Schlüssel automatisch und führt die Übermittlung durch (Standard: `false`)
- `autofocus {Boolean/String}` kann eine Eingabe fokussieren. `String` === `jQuery selector` für die Eingabe
- `default {String}` ein Kurzalias für `DEFAULT(default, true)`
- `zindex {Number}` kann den Z-Index beeinflussen (Standard: `12`)

__Gut zu wissen__:

Der Inhalt von `j-FixedModal` ist in drei Teile unterteilt: `header`, `body` und `footer`. Jeder Teil muss definiert werden. Die Komponente fügt jedem Teil CSS-Klassen hinzu, zum Beispiel enthält der erste `div` `ui-fixedmodal-header`, der zweite `ui-fixedmodal-body` und der dritte `ui-fixedmodal-footer`.

---

Diese Komponente unterstützt die dynamische Auswertung des Inhalts von `<script type="text/html">`. Das folgende Beispiel enthält ein Skript mit HTML und die Komponente wertet den Inhalt aus, ob j-Modal angezeigt wird (nur einmal).

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

Verwenden Sie es mit `<ui-component name="fixedmodal">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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