# j-Modal

> Este o alternativă simplă la j-Form.

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

Este o alternativă simplă la `j-Form`.

- Funcționează numai cu `+v17`
- Componenta mișcă conținutul acestui component sub eticheta `<body>` (datorită poziționării)


__Configurarea__:

- Titlul modular `title {String}` (înlocuiește un element de etichetă `HTML` în titlu)
- `width {Number}` modală max-width
- `if {String}` condiţia de a arăta modalitatea, este comparată cu valoarea din interiorul `path`
- `icon {String}` Iconul total fără `ti-`
- `reload {String}` este conectat la un `function(modal_component)` global și este executat dacă formularul este afișat
- `submit {String}` este conectat la un `function(hide)` global și este executat dacă se prestează butonul de depunere
- `cancel {String}` este conectat la un `function(hide)` global și este executat dacă se prestează butonul de anulare
- `enter {Boolean}` captează în mod automat cheia `enter` și efectuează depunerea (default: `false`)
- `center {Boolean}` centrează forma în mijlocul ecranului
- `autofocus {Boolean/String}` poate concentra o intrare. `String` === `jQuery selector` pentru intrarea
- `default {String}` este un alias scurt pentru `DEFAULT(default, true)`
- `zindex {Number}` poate afecta indexul z (default: `12`)
- `align {Number}` Aliniere modală `0` în centralizare (default `1` în partea de jos, `2` în partea de jos, `3` În partea de sus, `4` Topul drept
- `height {Number}` o min. înălțime dacă conținutul are dimensiuni mai mici decât definite `height`
- __NEW__ `bg {Boolean}` poate activa / dezactiva un strat de fundal (default: `true`)
- __NEW__ `scrollbar {Boolean}` poate activa/disabiliza scrollbarul (default: `false`)

__bine să știi__:

Conținutul de la `j-Modal` Este împărțit în trei părți: `header`, `body` şi `footer`Fiecare parte trebuie definită. componenta adaugă clase CSS fiecărei părți, de exemplu, în primul rând `div` Va conține `ui-modal-header`În al doilea `ui-modal-body` şi a treia `ui-modal-footer`.

---

Acest component susține evaluarea dinamică a conținutului `<script type="text/html">`. exemplul de mai jos conține un script cu HTML și componenta evaluează conținutul dacă va fi afișat j-Modal (numai o dată).

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

Utilizați-l cu `<ui-component name="modal">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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