Buenas tardes Mi nombre es Boris Cherepanov, estoy desarrollando sitios web en WordPress y Bitrix. Trabajé en el proyecto aquí. Una de las limitaciones era no usar jquery, pero tenía que llamar a la misma ventana modal desde diferentes botones. En realidad, esta es una tarea bastante simple, pero decidí seguir adelante y crear una ventana modal que se crearía con el primer clic, guardar su estado, tener un constructor para llamar, etc. Y al final, no me arrepentí. Explicaré por qué más tarde. "Envolví" esta ventana modal en una solución llave en mano que se puede usar constantemente.
Instalación
Instalar tal "modal" es simple. Descargue el archivo js y conéctese. No depende de ningún evento o biblioteca, por lo que puede conectarse donde lo necesite. Aquí está el
enlace en githubInicialización
En la página en la que necesita llamar, escriba 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' } });
Más sobre artículos en un objeto
Hay 6 puntos requeridos:
- bodyID es el identificador del bloque que contendrá el contenido de la ventana modal
- backgroundLayerID - id de la capa de atenuación
- selector - atributo html que estará en todos los botones que provocará una ventana modal
- selectorValue - valor del selector
- bntID: identificación del botón para cerrar la ventana modal
- contenido - texto o html dentro de una ventana modal
Opcional, pero puntos muy importantes:
- classListBg, classListBody, classListBtn: matrices de clases para la capa de atenuación, la ventana principal y el botón de cierre, respectivamente
- styleBg, styleBody, btnStyle: objetos con los estilos de la capa de atenuación, la ventana principal y el botón de cierre, respectivamente
Un poco sobre la ventana modal en sí
Ya he dicho que la tarea principal que resuelve esta ventana modal es una llamada desde varios botones. Hacer clic en varios botones para llamar a js es un ejemplo típico de delegación y en XMC (como llamé a mi ventana modal) se implementa de la siguiente manera:
XMC.prototype.delegateClick = function () { var mf = this; window.addEventListener('click', function () {
En consecuencia, en el constructor debe registrarse:
var XMC = function (object) { this.delegateClick(); }
Por cierto, en un momento, un artículo con
Learn JavaScript me ayudó a lidiar con esto. Familiarizarse con él será útil.
AJAX para formulario
En mi "caso" fue necesario cargar el formulario usando ajax (esta tarea apareció en el proceso). Gracias a mi enfoque inicial, logré ahorrar bastante tiempo. Me expandí a través del prototipo.
XMC.prototype.ajax = function () { var mf = this; var data = new Object();
Tenía un código de solicitud para CMS Wordpress.
Resumen
Como resultado, gracias al enfoque de objeto, logré hacer no solo ventanas emergentes, sino casi una aplicación web en la que tengo 2 ajax para recibir el formulario y enviar, traducción específica del navegador, leer cookies, cargar animación. Gracias a esto, no tuve que buscar nuevos elementos por varios selectores para traducir o trabajar con los datos del formulario que "llegó" por ajax.
Espero que encuentre útil mi artículo. Buena suerte