j-FixedModal

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

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).

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

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>