# j-FixedModal

> O conteúdo do j-FixedModal é dividido em 3 partes: cabeçalho, corpo e footer. Cada parte deve ser definida. o componente adiciona classes CSS a cada parte, por exemplo, o primeiro div contém um modal fixado

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

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

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

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