Esse conteúdo foi desenvolvido para ser melhor visualizado em navegadores modernos.

Para um melhor aproveitamento, por favor atualize o seu navegador ou utilize o Chrome, Firefox ou Edge atualizado.

Popup - Componente de janelas flutuantes

O componente de popup foi desenvolvido para facilitar a incorporação de chamadas de conteúdos em janelas flutuantes reduzindo a quantidade de códigos pelo designer e desenvolvedor.

O sistema permite uma enorme variedade de usos, que de modo geral podem ser divididos pela fonte desse conteúdo:

Na própria página, mas fora do corpo principal do conteúdo. Também conhecido como comentários, exemplo, etc.
Em uma página externa, importando o seu conteúdo. Conhecido geralmente por verbetes.
Em uma página externa, sendo incorporado o conteúdo. Conhecido geralmente por embed, Iframe ou, quando o próprio curso em relembrando.
Uma imagem, exibindo ampliada. Conhecido geralmente por lightbox ou zoom

Além das opções descritas a API foi criada para permitir uma forte personalização de uso e acesso diretamente por programação. No fim desse documento voltaremos a detalhar cada uma das propriedades e formas de uso.

O comportamento de cada tipo de popup é detectado pelo sistema baseado nos atributos e no tipo de url inserida na tag de chamada, contudo o resultado pode ser forçado definindo um valor para o atributo data-type. Veja mais na sessão sobre detalhes para programação.

Ico Info

Botão pare informações pertinentes ao texto anterior ao ícone.

<i class="ico-info">
	<a
		data-popup="true" 
		data-content="Uma simples definição ou texto" 
		data-size="sm" 
		data-quickclose="true"
	>
</i>

Uso único

Em caso de elementos mais complexos, mas de uso único, o bloco pode ser criado na própria página, na área com ID EXTRAS, na parte inferior do template. Essa área não é visível até ser chamada por código, mas é pré-carregada.

A identificação do elemento a ser carregado se dá na propriedade data-href e aceitam qualquer seletor jQuery.

<a 
	data-popup="true" 
	data-href="#filmete-teste"
	href="#" 
	data-size="md"
	data-draggable="true" 
>
	Abre um pop-up de uso único
</a>

Página externa importada

No caso de conteúdos compartilhados essa opção importa o conteúdo e a insere no corpo da página utilizando e disponibilizando seus recursos.

Cuidado para evitar conflitos entre os dois escopos. Em caso de dúvidas, na página Infográficos existem padrões para tentar mitigar esse risco e podem ser aproveitadas.

Caso o conteúdo compartilhado seja interno ao curso, ele deve ficar na pasta extras na raíz do curso.

<a 
	data-popup="true" 
	href="#" 
	data-href="./extras/extra_1.html" 
	data-size="md" 
	data-draggable="true"
	>
		Abre um pop-up de conteúdo externo importado
</a>

Página externa incorporada

Outra solução para conteúdos compartilhados ou externos é a incorporação do conteúdo sem incorporar no corpo da página. Essa opção isola os recursos e evita conflitos, mas permite menos controle do framework sobre o conteúdo da página.

O conteúdo sejá acessado via Iframe e o desenvolvimento deve ter suas restrições em mente.

<a 
	data-popup="true" 
	href="#" 
	data-href="https://sv.www5.fgv.br/fgvonline/framework_html5/framework_nm_v3/docs/index.html" 
	data-size="lg" 
	data-draggable="true" 
	>
		Abre um pop-up de conteúdo externo incorporado
</a>

Imagem

Um uso adicional do popup é criar um efeito de lightbox ou zoom em imagens.

A referência utilizada pode ser o mesmo arquivo, ou até outro com maior resolução ou mais detalhes.

<a 
	data-popup="true" 
	href="#" 
	data-href="./img/sample.jpg" 
	data-size="lg" 
	>
		Abre um pop-up com a imagem
</a>

Elemento específico de página externa do mesmo domínio

Possibilita a importação de um elemento específico de uma outra página do mesmo domínio.

Além do link dentro de data-href precisar ser do mesmo domínio, é necessário também especificar o seletor JQuery depois da url, utilizando um espaço para separa-los, como no exemplo ao lado.

O uso do seletor JQuery se dá da mesma forma do Uso Único.

No caso de refenciar uma citação no ECLASS não é necessário acrecentar o seletor JQuery depois da url. Neste caso a seleção do Article é feita automaticamente. Por exemplo:

href="https://ls.cursos.fgv.br/d2l/lor/viewer/viewFile.d2lfile/6606/134384,0/Patrimônio.html"

<a 
	data-popup="true" 
	href="#" 
	data-href="https://sv.www5.fgv.br/fgvonline/framework_html5/framework_nm_v3_1/docs/componentes.html #tabs" 
	data-size="lg" 
	data-draggable="true"
	>
		Abre um pop-up com a imagem
</a>

Programação

A API de Pop-up permite tanto chamadas dentro do conteúdo como a criação e controle de pop-ups via programação através do objeto Popups em nm.nm_ui.popups, podendo ser criados pelo método abaixo. e recebendo um objeto Popup como retorno.

nm.nm_ui.popups.create( props /* $elem ou objeto de propriedades */, propsExtras /* [ objeto de propriedades ] */ )

Cada opção abaixo pode ser declada no objeto ou no caso de um elemento, com o atributo com o mesmo nome com o prefixo data-.

{
	//CONTEÚDO
	content: false,			// define uma string como conteúdo
	href:"#body",			// define uma referência, interna ou externa ao documento, como conteúdo

	//APARÊNCIA
	size: "sm",				// define a classe de tamanho [xs,sm,md,lg]
	overlay: true,			// demandar a ativação do overlay
	margin: 15,				// distância mínima das laterais do parent: opção STAGE

	//POSIÇÃO
	x: null,				// posição do ponto central no eixo X
	y: null,				// posição do ponto central no eixo Y
	target: false,			// elemento referência para centralizar
	autocenter: true,		// scroll a página para centralizar a página ao popup
	anchor: 'absolute',		// define se o popup será absulto ou fixo, em relação a SCROLL

	//FECHAMENTO
	closebutton: true,		// permite a criação do botão de fechar
	quickclose: false,		// permite o fechamento ao click em qualquer perte do popup
	remoteclose: true,		// permite que o popup seja fechado pelo sistema de gerenciamento, como no click do overlay

	//COMPORTAMENTOS
	draggable: false,		// define se a popup será carregável, caso valor TRUE, elemento H2, caso STRING, usa como seletor para definir o objeto
	autodestroy: true,		// define se o popup deve remover a sua referência do DOM depois de fechar
	autoopen: true,			// inserir no DOM e exibir popup ao ser criado
	preload: false,			// carregar conteúdo externo antes de inserir no DOM
	confirm: function( val ){}, // callback para alerta, confirm e prompt caso de sucesso
	cancel:  function( val ){}, // callback para alerta, confirm e prompt caso cancelado
	stage: $("body"),		// elemento DOM onde o popup será inserido
};

Exemplo

$(this).click(function(e){
	console.log(e)
	var popupId = $(this).data('popup');
	popupId = popupId ? popupId.id : false ;

	var opts = { id: popupId, x: e.pageX, y: e.pageY };
	var href = $(this).data('href') || $(this).attr('href');
	try{
		if( $(href).prop("tagName") == "IMG" ){							
			opts.type = "3";
			href = $(href).attr('src');
		}
	}catch(e){}
	if( href ) opts.href = href;
	$(this).data(
				'popup',
				nm.nm_ui.popups.create( $(this), opts )
			);
	return false;
});

Modais interativos ou dialogs

ALERT

Criar uma janela de alerta.

<a 
	data-popup="true" 
	href="" 
	data-content="Só um aviso." 
	data-size="sm" 
	data-quickclose="true"
	data-type="alert"
>
	Abre um alerta simples
</a>

CONFIRM

Criar uma janela de confirmação.

<a 
	data-popup="true" 
	href="" 
	data-content="Abre uma caixa de confirmaçção simples" 
	data-size="sm" 
	data-quickclose="true"
	data-type="confirm"
>
	Abre um pop-up interno
</a>

PROMPT

Criar uma janela de prompt.

<a 
	data-popup="true" 
	href="" 
	data-content="Uma simples definição ou texto" 
	data-size="sm" 
	data-quickclose="true"
	data-type="prompt"
>
	Abre um pop-up interno
</a>