Se voc\u00ea j\u00e1 trabalhou com o Elementor e tentou manipular seus popups programaticamente, provavelmente percebeu que a documenta\u00e7\u00e3o oficial oferece exemplos de manipula\u00e7\u00e3o de eventos apenas com jQuery. Por\u00e9m, se voc\u00ea prefere uma solu\u00e7\u00e3o moderna e leve utilizando Vanilla JavaScript, este guia \u00e9 para voc\u00ea.<\/p>\n\n\n\n
Com a API MutationObserver<\/strong>, voc\u00ea pode monitorar altera\u00e7\u00f5es no DOM e detectar quando um modal de popup do Elementor \u00e9 injetado no <body>. Isso permite que voc\u00ea execute a\u00e7\u00f5es personalizadas sem depender de bibliotecas adicionais.<\/p>\n\n\n\n A API MutationObserver<\/strong> \u00e9 um recurso nativo do JavaScript que permite observar mudan\u00e7as no DOM, como:<\/p>\n\n\n\n No caso dos popups do Elementor, essa API \u00e9 perfeita para detectar quando o modal \u00e9 dinamicamente adicionado ao DOM.<\/p>\n\n\n\n Aqui est\u00e1 um snippet completo que voc\u00ea pode usar no seu projeto:<\/p>\n\n\n\n 1. Monitorando o <\/strong><body>:<\/strong><\/p>\n\n\n\n O elemento <body> \u00e9 observado porque o Elementor injeta seus popups como n\u00f3s filhos do <body>.<\/p>\n\n\n\n 2. MutationObserver:<\/strong><\/p>\n\n\n\n Usamos o MutationObserver<\/strong> para monitorar mudan\u00e7as nos n\u00f3s filhos do <body> configurando { childList: true }.<\/p>\n\n\n\n 3. Filtrando N\u00f3s Adicionados:<\/strong><\/p>\n\n\n\n Para cada n\u00f3 adicionado, verificamos se ele possui a classe elementor-popup-modal, que identifica os popups do Elementor.<\/p>\n\n\n\n 4. A\u00e7\u00f5es Personalizadas:<\/strong><\/p>\n\n\n\n Quando o modal \u00e9 detectado, voc\u00ea pode executar qualquer l\u00f3gica personalizada no bloco onde o console.log est\u00e1 localizado.<\/p>\n\n\n\n Suponha que voc\u00ea queira aplicar uma anima\u00e7\u00e3o personalizada quando um popup do Elementor aparecer. Voc\u00ea pode modificar o c\u00f3digo assim:<\/p>\n\n\n\n 1. Sem Depend\u00eancias:<\/strong><\/p>\n\n\n\n Reduz o tamanho total do projeto eliminando bibliotecas como jQuery.<\/p>\n\n\n\n 2. Melhor Performance:<\/strong><\/p>\n\n\n\n Vanilla JavaScript geralmente \u00e9 mais r\u00e1pido, pois n\u00e3o possui o overhead de lidar com seletores e eventos adicionais.<\/p>\n\n\n\n 3. Compatibilidade Moderna:<\/strong><\/p>\n\n\n\n A API MutationObserver<\/strong> \u00e9 suportada em todos os navegadores modernos, incluindo Edge e Safari.<\/p>\n\n\n\n Usar o MutationObserver<\/strong> para detectar popups do Elementor \u00e9 uma solu\u00e7\u00e3o elegante e eficiente, especialmente para desenvolvedores que preferem n\u00e3o depender do jQuery. Com este c\u00f3digo, voc\u00ea pode personalizar totalmente como interage com os popups do Elementor, seja adicionando anima\u00e7\u00f5es, rastreando eventos ou implementando outra l\u00f3gica personalizada.<\/p>\n\n\n\n Se achou essa dica \u00fatil, compartilhe com outros desenvolvedores e deixe suas ideias de personaliza\u00e7\u00e3o de popups nos coment\u00e1rios! \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":" Se voc\u00ea j\u00e1 trabalhou com o Elementor e tentou manipular seus popups programaticamente, provavelmente percebeu que a documenta\u00e7\u00e3o oficial oferece exemplos de manipula\u00e7\u00e3o de eventos apenas com jQuery. Por\u00e9m, se voc\u00ea prefere uma solu\u00e7\u00e3o moderna e leve utilizando Vanilla JavaScript, este guia \u00e9 para voc\u00ea. Com a API MutationObserver, voc\u00ea pode monitorar altera\u00e7\u00f5es no DOM […]<\/p>\n","protected":false},"author":1,"featured_media":324,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"\nPor que Usar o MutationObserver<\/strong><\/h2>\n\n\n\n
\n
C\u00f3digo para Detectar Popups do Elementor<\/strong><\/h2>\n\n\n\n
\/\/ Seleciona o elemento <body>\nconst body = document.body;\n\n\/\/ Cria um MutationObserver\nconst observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n \/\/ Verifica se novos n\u00f3s foram adicionados\n if (mutation.type === \"childList\") {\n mutation.addedNodes.forEach((node) => {\n \/\/ Verifica se o n\u00f3 adicionado \u00e9 um modal de popup do Elementor\n if (node.classList && node.classList.contains(\"elementor-popup-modal\")) {\n console.log(\"Popup do Elementor detectado:\", node);\n \/\/ Adicione sua l\u00f3gica personalizada aqui\n }\n });\n }\n });\n});\n\n\/\/ Configura o observer para monitorar o <body>\nobserver.observe(body, { childList: true });\n\n\/\/ Interrompe a observa\u00e7\u00e3o quando n\u00e3o for mais necess\u00e1ria (opcional)\n\/\/ observer.disconnect();<\/code><\/pre>\n\n\n\nComo Funciona<\/strong><\/h2>\n\n\n\n
Caso de Uso Pr\u00e1tico<\/strong><\/h2>\n\n\n\n
if (node.classList && node.classList.contains(\"elementor-popup-modal\")) {\n console.log(\"Popup do Elementor detectado:\", node);\n node.style.opacity = 0; \/\/ Come\u00e7a invis\u00edvel\n setTimeout(() => {\n node.style.transition = \"opacity 0.5s\";\n node.style.opacity = 1; \/\/ Efeito de fade-in\n }, 0);\n}<\/code><\/pre>\n\n\n\nPor que Escolher Vanilla JS?<\/strong><\/h2>\n\n\n\n
\u00c9 Isso!<\/strong><\/h3>\n\n\n\n