# j-Modal

> Es una alternativa sencilla a j-Form.

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

Es una alternativa sencilla a `j-Form`.

- Funciona sólo con `+v17`
- El componente mueve el contenido de este componente bajo la etiqueta `<body>` (debido al posicionamiento)


__Configuración__:

- Título modal `title {String}` (reemplaza un `HTML` en el elemento de etiqueta en el encabezado)
- `width {Number}` ancho máximo modal
- `if {String}` condición para mostrar el modal, se compara con el valor dentro de `path`
- `icon {String}` Icono total sin `ti-`
- Enlace `reload {String}` a un `function(modal_component)` global y se ejecuta si se muestra el formulario.
- Enlace `submit {String}` a un `function(hide)` global y se ejecuta si se presiona el botón enviar
- `cancel {String}` enlaza a un `function(hide)` global y se ejecuta si se presiona el botón cancelar
- `enter {Boolean}` captura la clave `enter` automáticamente y realiza el envío (predeterminado: `false`)
- `center {Boolean}` centra el formulario en la mitad de la pantalla
- `autofocus {Boolean/String}` puede enfocar una entrada. `String` === `jQuery selector` para la entrada
- `default {String}` un alias corto para `DEFAULT(default, true)`
- `zindex {Number}` puede afectar el índice z (predeterminado: `12`)
- `align {Number}` alinea el modal `0` centrado (predeterminado), `1` abajo derecha, `2` abajo izquierda, `3` arriba izquierda, `4` arriba derecha
- `height {Number}` un mín. altura si el contenido tiene un tamaño menor que el definido `height`
- __NEW__ `bg {Boolean}` puede habilitar/deshabilitar una capa de fondo (predeterminado: `true`)
- __NEW__ `scrollbar {Boolean}` puede habilitar/deshabilitar la barra de desplazamiento (predeterminado: `false`)

__Es bueno saberlo__:

El contenido del `j-Modal` se divide en 3 partes: `header`, `body` y `footer`. Cada parte debe estar definida. El componente agrega clases CSS a cada parte, por ejemplo, el primer `div` contendrá `ui-modal-header`, el segundo `ui-modal-body` y el tercero `ui-modal-footer`.

---

Este componente admite la evaluación dinámica del contenido de `<script type="text/html">`. El siguiente ejemplo contiene un script con HTML y el componente evalúa el contenido si se mostrará j-Modal (solo una vez).

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

Úselo con `<ui-component name="modal">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

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