以模式显示来自表单提交(Mailchimp)的响应
Display response from form submit (Mailchimp) in a modal
这是我的第一个SO问题,希望有人能帮忙!
我在我的网站上嵌入了一个自定义的 Mailchimp 表单,我正在尝试获取以模式显示的响应。我实际上已经成功地将其设置为模态,但我无法显示关闭按钮,也无法显示模态叠加层。
我在很多地方搜索了解决方案,包括:
- Modal pop up after submitting form on the same page
- How can I display the response of a MailChimp form submit in a modal box instead of redirecting?
为此,我在我的页面上包含了 jQuery,版本 jquery-3.2.0.min.js,但我很乐意改用 vanilla JS。
这是表格的相关部分 HTML:
<div id="mce-responses" class="clear">
<div class="modal-overlay closed" id="modal-overlay">
</div>
<div class="response modal closed" id="mce-error-response">
<button class="close-button" id="close-button">Close Button</button>
</div>
<div class="response modal closed" id="mce-success-response">
<button class="close-button" id="close-button">Close Button</button>
</div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_2e0789618f3335c1fdeae5f80_f5d18d0c88" tabindex="-1" value="">
</div>
<div class="button-heart form-submit">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe">
<svg class="icon icon-heart" aria-hidden="true">
<use xlink:href="/images/icons.svg#heart"></use>
</svg>
</div>
这是我的 JS,包括默认的 MailChimp 脚本:
<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';}(jQuery));var $mcj = jQuery.noConflict(true);
</script>
<script type='text/javascript'>
var modal = document.querySelector("#modal");
var modalOverlay = document.querySelector("#modal-overlay");
var closeButton = document.querySelector("#close-button");
var openButton = document.querySelector("#mc-embedded-subscribe");
openButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
closeButton.classList.toggle("closed");
});
closeButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
</script>
然后是我的 CSS:
.modal {
display: block;
z-index: 2000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
max-width: 100%;
height: 300px;
max-height: 100%;
background: $main-white;
box-shadow: $card-shadow-black;
}
.modal-overlay {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.75);
}
.closed {
display: none;
}
.close-button {
color: $third-accent;
padding: 2em;
margin: 2em;
background: $main-black;
}
我也在 Chrome 检查器中收到控制台错误:
Uncaught TypeError: Cannot read property 'classList' of null
at HTMLButtonElement.<anonymous> ((index):114)
这是我当前结果的屏幕截图:
screenshot of result
我发现 Whosebug 非常宝贵,因为多年来我一直在自学网络开发,我很高兴 post 我的第一个问题。感谢您提供的任何帮助!
原因是虽然你的模式有 class modal
,但它没有 ID modal
,因此试图 select 它用#modal
或selector会找不到任何文件,而returnnull
。由于无法在 null
值上访问属性,因此抛出异常。将 selector 切换为 .modal
或将 id="modal"
属性添加到模态元素。
因此 HTML:
<div id="mce-responses" class="clear">
<div class="modal-overlay closed" id="modal-overlay">
</div>
<div class="response modal closed" id="mce-error-response">
<button class="close-button" id="close-button">Close Button</button>
</div>
<div class="response modal closed" id="modal">
<button class="close-button" id="close-button">Close Button</button>
</div>
</div>
以及以下 JS:
var modal = document.querySelector("#modal");
var modalOverlay = document.querySelector("#modal-overlay");
var closeButton = document.querySelector("#close-button");
var openButton = document.querySelector("#mc-embedded-subscribe");
openButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
closeButton.classList.toggle("closed");
});
closeButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
})
当我单击 Subscribe
按钮时,我看到模式弹出,其中只有一个非功能性关闭按钮。这不是发生在你身上的事吗?
这是我的第一个SO问题,希望有人能帮忙!
我在我的网站上嵌入了一个自定义的 Mailchimp 表单,我正在尝试获取以模式显示的响应。我实际上已经成功地将其设置为模态,但我无法显示关闭按钮,也无法显示模态叠加层。
我在很多地方搜索了解决方案,包括:
- Modal pop up after submitting form on the same page
- How can I display the response of a MailChimp form submit in a modal box instead of redirecting?
为此,我在我的页面上包含了 jQuery,版本 jquery-3.2.0.min.js,但我很乐意改用 vanilla JS。
这是表格的相关部分 HTML:
<div id="mce-responses" class="clear">
<div class="modal-overlay closed" id="modal-overlay">
</div>
<div class="response modal closed" id="mce-error-response">
<button class="close-button" id="close-button">Close Button</button>
</div>
<div class="response modal closed" id="mce-success-response">
<button class="close-button" id="close-button">Close Button</button>
</div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_2e0789618f3335c1fdeae5f80_f5d18d0c88" tabindex="-1" value="">
</div>
<div class="button-heart form-submit">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe">
<svg class="icon icon-heart" aria-hidden="true">
<use xlink:href="/images/icons.svg#heart"></use>
</svg>
</div>
这是我的 JS,包括默认的 MailChimp 脚本:
<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';}(jQuery));var $mcj = jQuery.noConflict(true);
</script>
<script type='text/javascript'>
var modal = document.querySelector("#modal");
var modalOverlay = document.querySelector("#modal-overlay");
var closeButton = document.querySelector("#close-button");
var openButton = document.querySelector("#mc-embedded-subscribe");
openButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
closeButton.classList.toggle("closed");
});
closeButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
</script>
然后是我的 CSS:
.modal {
display: block;
z-index: 2000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
max-width: 100%;
height: 300px;
max-height: 100%;
background: $main-white;
box-shadow: $card-shadow-black;
}
.modal-overlay {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.75);
}
.closed {
display: none;
}
.close-button {
color: $third-accent;
padding: 2em;
margin: 2em;
background: $main-black;
}
我也在 Chrome 检查器中收到控制台错误:
Uncaught TypeError: Cannot read property 'classList' of null
at HTMLButtonElement.<anonymous> ((index):114)
这是我当前结果的屏幕截图: screenshot of result
我发现 Whosebug 非常宝贵,因为多年来我一直在自学网络开发,我很高兴 post 我的第一个问题。感谢您提供的任何帮助!
原因是虽然你的模式有 class modal
,但它没有 ID modal
,因此试图 select 它用#modal
或selector会找不到任何文件,而returnnull
。由于无法在 null
值上访问属性,因此抛出异常。将 selector 切换为 .modal
或将 id="modal"
属性添加到模态元素。
因此 HTML:
<div id="mce-responses" class="clear">
<div class="modal-overlay closed" id="modal-overlay">
</div>
<div class="response modal closed" id="mce-error-response">
<button class="close-button" id="close-button">Close Button</button>
</div>
<div class="response modal closed" id="modal">
<button class="close-button" id="close-button">Close Button</button>
</div>
</div>
以及以下 JS:
var modal = document.querySelector("#modal");
var modalOverlay = document.querySelector("#modal-overlay");
var closeButton = document.querySelector("#close-button");
var openButton = document.querySelector("#mc-embedded-subscribe");
openButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
closeButton.classList.toggle("closed");
});
closeButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
})
当我单击 Subscribe
按钮时,我看到模式弹出,其中只有一个非功能性关闭按钮。这不是发生在你身上的事吗?