# j-FixedModal

> El contenido del j-FixedModal se divide en 3 partes: encabezado, cuerpo y pie de página. Cada parte debe estar definida. El componente agrega clases CSS a cada parte, por ejemplo, el primer div contendrá ui-fixedmodal

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

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


__Configuración__:

- `width {Number}` ancho máximo modal
- `if {String}` condición para mostrar el modal, se compara con el valor dentro de `path`
- `reload {String}` enlace a una función global y se ejecuta si se muestra el formulario
- `submit {String}` enlace a una función global y se ejecuta si se presiona el botón enviar
- `cancel {String}` enlaza a una función 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`)
- `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`)

__Es bueno saberlo__:

El contenido del `j-FixedModal` 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-fixedmodal-header`, el segundo `ui-fixedmodal-body` y el tercero `ui-fixedmodal-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="fixedmodal" path="path" config="config">
	<script type="text/html">
		A CONTENT
	</script>
</ui-component>
```

Úselo con `<ui-component name="fixedmodal">`. 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
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>
```