Boa tarde Meu nome é Boris Cherepanov, estou desenvolvendo sites em wordpress e bitrix. Eu trabalhei no projeto aqui. Uma das limitações não era usar o jquery, mas eu tive que chamar a mesma janela modal de botões diferentes. Na verdade, essa é uma tarefa bastante simples, mas eu decidi ir em frente e criar uma janela modal que seria criada no primeiro clique, salvar seu estado, ter um construtor para chamar etc. E no final, não me arrependi. Vou explicar o porquê mais tarde. Eu "envolvi" essa janela modal em uma solução pronta para uso que pode ser usada constantemente.
Instalação
A instalação de um "modal" é simples. Faça o download do arquivo js e conecte-se. Não depende de nenhum evento ou biblioteca, para que você possa se conectar onde precisar. Aqui está o
link no githubInicialização
Na página em que você precisa ligar, escreva em js:
new XMC({ bodyID: 'body', backgroundLayerID: 'wrapper', selector: 'data-type', selectorValue: 'openModalForm', btnId: 'mfClose', content: '', classListBg: ['zuzu', 'zaza'], classListBody: ['zuzu', 'zaza2'], classListBtn: ['zuzu', 'zaza3'], styleBg: { top: '0', left:'0', right: '0', bottom: '0', position: 'fixed', background: '#00000090', justifyContent: 'center', alignItems: 'center', zIndex: '6' }, styleBody: { minWidth: '200px', minHeight: '200px', background: '#ffffff', justifyContent: 'center', alignItems: 'center', }, btnStyle: { width: '40px', height: "40px", background: '#ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'absolute', top: '5%', right: '5%', cursor: 'pointer' } });
Mais sobre itens em um objeto
Existem 6 pontos obrigatórios:
- bodyID é o identificador do bloco que conterá o conteúdo da janela modal
- backgroundLayerID - ID da camada de escurecimento
- seletor - atributo html que estará em todos os botões que causarão uma janela modal
- selectorValue - valor do seletor
- bntID - identificação do botão para fechar a janela modal
- conteúdo - texto ou html dentro de uma janela modal
Pontos opcionais, mas muito importantes:
- classListBg, classListBody, classListBtn - matrizes de classe para a camada de escurecimento, janela principal e botão fechar, respectivamente
- styleBg, styleBody, btnStyle - objetos com os estilos da camada de escurecimento, da janela principal e do botão Fechar, respectivamente
Um pouco sobre a própria janela modal
Eu já disse que a principal tarefa que essa janela modal resolve é uma chamada de vários botões. Clicar em vários botões para chamar js é um exemplo típico de delegação e no XMC (como chamei minha janela modal) é implementado da seguinte maneira:
XMC.prototype.delegateClick = function () { var mf = this; window.addEventListener('click', function () {
Assim, no construtor, você precisa se registrar:
var XMC = function (object) { this.delegateClick(); }
A propósito, ao mesmo tempo, um artigo com
aprender javascript me ajudou a lidar com isso. Familiarizar-se com isso será útil.
AJAX para formulário
No meu "caso", era necessário carregar o formulário usando ajax (esta tarefa apareceu no processo). Graças à minha abordagem inicial, consegui economizar um pouco de tempo. Eu me expandi através do protótipo.
XMC.prototype.ajax = function () { var mf = this; var data = new Object();
Eu tinha um código de solicitação para o CMS Wordpress.
Sumário
Como resultado, graças à abordagem de objetos, consegui criar não apenas pop-ups, mas quase um aplicativo da Web no qual tenho 2 ajax para receber o formulário e enviar, tradução específica do navegador, ler cookies, carregar animação. Graças a isso, não precisei procurar novos elementos de vários seletores para traduzir ou trabalhar com os dados do formulário que "chegaram" pelo ajax.
Espero que você ache meu artigo útil. Boa sorte