j-Modal

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

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

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

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>