# j-Modal

> Ez egy egyszerű alternatíva a j-Form.

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

Ez egy egyszerű alternatíva a `j-Form`.

- Csak a `+v17`-vel működik
- Az összetevő a tartalmat a `<body>` címké alatt mozgatja (a pozíció miatt)


__konfiguráció__:

- `title {String}` modális cím (a címkén található `HTML` elem helyébe kerül)
- `width {Number}` modál max szélesség
- `if {String}` a modál megjelenítésének feltétele, összehasonlítva az értékkel a `path`
- `icon {String}` teljes ikon nélkül `ti-`
- `reload {String}` kapcsolat egy globális `function(modal_component)` és ez fut, ha a formanyomtatvány megjeleníti
- `submit {String}` kapcsolat egy globális `function(hide)` és ez fut, ha a benyújtási gomb megnyomja
- `cancel {String}` kapcsolat egy globális `function(hide)` és fut, ha a törlés gomb megnyomja
- A `enter {Boolean}` automatikusan rögzíti a `enter` kulcsot, és elvégzi a benyújtást (például: `false`)
- A `center {Boolean}` a képernyő közepére összpontosít
- A `autofocus {Boolean/String}` egy bevitelt fókuszálhat. `String` === `jQuery selector` a beviteli
- `default {String}` rövid alias a `DEFAULT(default, true)` számára
- A `zindex {Number}` befolyásolhatja a z-indexet (default: `12`)
- `align {Number}` Alignálódás `0` A központi (default) `1` A jobb alján, `2` A bal oldali, `3` A felső felső, `4` Jobb felső
- `height {Number}` min. magasság, ha a tartalom kisebb méretű, mint a meghatározott `height`
- __NEW__ `bg {Boolean}` egy háttérréteg engedélyezhető/mentesíthető (elsődleges: `true`)
- __NEW__ `scrollbar {Boolean}` engedélyezheti/kizárhatja a forgatót (default: `false`)

__Jó tudni__:

A `j-Modal` tartalma három részre oszlik: `header`, `body` és `footer`. Minden résznek meg kell határoznia.A komponens CSS osztályokat ad minden részhez, például az első `div` tartalmazza a `ui-modal-header`, a második `ui-modal-body` és a harmadik `ui-modal-footer`.

---

Ez az összetevő támogatja a `<script type="text/html">` tartalmának dinamikus értékelését.Az alábbi példa HTML-vel ellátott forgatókönyvet tartalmaz, és a komponens értékeli a tartalmat, ha a j-Modal megjelenik (csak egyszer).

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

Használja a `<ui-component name="modal">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

```html example.html
<ui-component name="modal" path="common.form" config="if:user;width:600;submit:usermodal_submit;icon:home" class="hidden">

	<!-- HEADER -->
	<div>
		<span class="link cancel"><i class="ti ti-times"></i></span>
		<label>Your title</label>
	</div>

	<!-- BODY -->
	<div>
		<div class="padding">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
		</div>
	</div>

	<!-- FOOTER -->
	<div>
		<span class="link cancel">Cancel</span>
		<button name="submit"><i class="ti ti-save"></i>Submit form</button>
	</div>

</ui-component>

<script>

	function usermodal_submit(hide) {
		alert('SUBMIT');
		hide();
	}

	var common = {};

	// Show the form
	common.form = 'user';
</script>
```