j-FixedModal

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Trabalha apenas com +v17
O componente move o conteúdo deste componente sob a tag <body> (por causa da posição)

Configuração:

width {Number} Modal Max-width
A condição de if {String} para a apresentação do modal, é comparada com o valor dentro de path
reload {String} liga-se a uma função global e é executada se o formulário estiver mostrando
submit {String} liga-se a uma função global e é executada se o botão de envio for pressionado
cancel {String} liga-se a uma função global e é executada se o botão de cancelamento for pressionado
enter {Boolean} capta automaticamente a chave enter e realiza o envio (default: false)
autofocus {Boolean/String} pode focar uma entrada. String === jQuery selector para a entrada
default {String} é um alias curto para DEFAULT(default, true)
zindex {Number} pode afetar o índice z (default: 12)

Bom para saber:

O conteúdo do j-FixedModal é dividido em 3 partes: header, body e footer. Cada parte deve ser definida. o componente adiciona classes CSS a cada parte, por exemplo, o primeiro div contém ui-fixedmodal-header, segundo ui-fixedmodal-body e terceiro ui-fixedmodal-footer.

Este componente suporta a avaliação dinâmica do conteúdo de <script type="text/html">. O exemplo abaixo contém um script com HTML e o componente avalia o conteúdo se o j-Modal será exibido (apenas uma vez).

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

Use-o com <ui-component name="fixedmodal">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>