Javascript для обнаружения текста, а затем нажмите кнопку закрытия всплывающего окна
У меня есть встроенная форма во всплывающем окне.
Когда появляется всплывающее окно и после этого при заполнении формы, приходит сообщение об успешном выполнении "Спасибо что подписались".
То, что я пытаюсь достичь, - это обнаружение сообщения, кнопка закрытия всплывающего окна с идентификатором #buttonidclose должна автоматически нажиматься через js.
Вот HTML:
<div id = "popmake-9255" class = "pum-container popmake theme-3633 pum-responsive pum-responsive-medium responsive size-medium active custom-position" style = "min-width: 0%; max-width: 100%; top: 175px; left: 683.688px; opacity: 1;">
<div class = "pum-content popmake-content">
<p>
<!-- Begin Mailchimp Signup Form -->
</p>
<div id = "mc_embed_signup">
<form action = "https://lbs.us15.list-manage.com/subscribe/post?u=ab37ecab7ff05893ae4a5b4fa&id=d918d8cb05" method = "post" id = "mc-embedded-subscribe-form" name = "mc-embedded-subscribe-form" class = "validate" target = "_blank" novalidate = "novalidate">
<input type = "hidden" name = "pum_form_popup_id" value = "9255">
<div id = "mc_embed_signup_scroll">
<h2>Subscribe to download our brochure</h2>
<div class = "indicates-required"><span class = "asterisk">*</span> indicates required</div>
<div class = "mc-field-group">
<label for = "mce-EMAIL">Email Address <span class = "asterisk">*</span><br>
</label><br>
<input type = "email" value = "" name = "EMAIL" class = "required email" id = "mce-EMAIL" aria-required = "true">
</div>
<div class = "mc-field-group">
<label for = "mce-FNAME">First Name <span class = "asterisk">*</span><br>
</label><br>
<input type = "text" value = "" name = "FNAME" class = "required" id = "mce-FNAME" aria-required = "true">
</div>
<div class = "mc-field-group">
<label for = "mce-LNAME">Last Name </label><br>
<input type = "text" value = "" name = "LNAME" class = "" id = "mce-LNAME">
</div>
<div class = "mc-field-group size1of2">
<label for = "mce-PHONE">Phone Number <span class = "asterisk">*</span><br>
</label><br>
<input type = "text" name = "PHONE" class = "required" value = "" id = "mce-PHONE" aria-required = "true">
</div>
<div id = "mce-responses" class = "clear">
<div class = "response" id = "mce-error-response" style = "display:none"></div>
<div class = "response" id = "mce-success-response" style = "display:none"></div>
</div>
<p>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
</p>
<div style = "position: absolute; left: -5000px;" aria-hidden = "true"><input type = "text" name = "b_ab37ecab7ff05893ae4a5b4fa_d918d8cb05" tabindex = "0" value = ""></div>
<div class = "clear"><input type = "submit" value = "Subscribe" name = "subscribe" id = "mc-embedded-subscribe" class = "button btn btn-primary"></div>
</div>
</form>
</div>
<p>
<script type = "text/javascript" src = "//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type = "text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='PHONE';ftypes[4]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script><br>
<!--End mc_embed_signup-->
</p>
</div>
<button type = "button" class = "pum-close popmake-close" aria-label = "Close">
× </button>
</div>Пожалуйста, направь меня.
@ Matt.S Во-первых, это встроенная форма mailchimp. Как определить сообщение об успехе?
не могли бы вы опубликовать код, который вы пробовали до сих пор? А разметка всплывающего окна? Он содержится в <iframe>? Боюсь, это слишком широко, чтобы ответить с имеющейся информацией
См. Этот ответ: stackoverflow.com/a/906565/9524541
@TomM Пожалуйста, проверьте, я обновил и добавил код в вопрос
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Что вы можете сделать, так это сделать переменную с логической переменной, сделав ее ложной по умолчанию и изменить ее значение на истину, когда форма заполнена, а затем запустить функцию
function ClickClose (){
while (variable == true){
// change class name here
}
}
вы можете сделать это по-другому, как вам нравится, это может быть одним из способов ...
Не могли бы вы помочь мне шаг за шагом с кодом, который я могу проверить. Помощь оценена!
var a = false; <div id = "test"> </div> function clickClose () {while (variable == false) {document.getElementById ("test"). classList.add (test1 '); document.getElementById ("MyElement"). classList.remove ('имя класса, который вы хотите удалить'); }} это простой пример ... кое-что даст вам идею
пожалуйста, проверьте событие в javascript stackoverflow.com/a/906565/9524541
Вы не поняли мой вопрос. Сначала я хочу определить, отображается ли текст на странице, и если да, будет применима функция щелчка. Как проверить этот текст?
вы хотите определить, является ли div пустым или нет. Для этого вы можете использовать var isEmpty = document.getElementById ('dummyId'). innerHTML === ""; и при использовании jquery var isEmpty = $ ("# dummyId"). html () === "";
Я бы рекомендовал использовать MutationObserver API.
Также посмотрите поддержка браузера для этого API
if ($('.pum-overlay').length > 0) {
// the mutationobserver api needs a DOM node, not a jquery object.
// You can access the node by appending [0] to the jquery call.
var targetNode = $('.pum-overlay')[0];
var config = { childList: true, subtree: true};
var callback = function (mutationsList, observer) {
for (var mutation of mutationsList) {
if ($('#mce-success-response').text().indexOf('Thank you for subscribing!') >= 0 ) {
$('.pum-close').trigger('click');
}
}
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
}
код взят из примера Mozilla и изменен
Я попробовал это на своем сервере, но это не сработало. Вот ссылка lbs.edu.ng/executive-education/executive-programmes, нажмите кнопку загрузки брошюры внизу страницы, после этого появится всплывающее окно, и когда появится сообщение об успешном завершении, ничего не произойдет.
если вы откроете инструменты разработчика, нажав f12, вы увидите ошибку Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.. Это потому, что #pum-container не присутствует в DOM до создания лайтбокса. Измените его на `$ ('. Pum-overlay') [0]`, и он должен работать. Я также обновил код, чтобы проверить, находится ли $('pum-overlay') на странице.
@ Нимеш ты уверен? Кажется, он работает при заполнении вашей формы
Да, я нашел решение, небольшое изменение вашего кода. Вот ссылка, jsfiddle.net/rL0qkh5v Пожалуйста, обновите свой ответ, спасибо.
Рад, что смог помочь. Я думаю, что ответ хорош как есть, поскольку он не должен представлять решение вашей конкретной проблемы, а скорее быть полезным для людей, посещающих этот сайт в будущем. На мой взгляд, тайм-аут и сопоставление слишком специфичны.
Ну, на самом деле соответствие текста в моем примере нарушено, поэтому я применю эту часть вашего редактирования
Что ж, спасибо, я пытался понять весь процесс. Ваше предыдущее было логически правильным, но я не мог понять, почему это не сработало. Вы нашли причину?
@Nimesh Да, я использовал $().text вместо $().text(), думая, что это простое свойство, а не метод. Кроме того, вы изменили регистр заглавных букв в строке в своем редактировании, чтобы она отличалась от первоначально опубликованной.
Проверь это. : api.jquery.com/click должно быть то, что вы ищете