在模式中显示表单提交（Mailchimp）的响应

Question

这是我的第一个问题，希望有人可以提供帮助！

我有一个嵌入我网站的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

我发现StackOverflow非常宝贵，因为多年来我一直在教自己web开发，我很高兴发布我的第一个问题。感谢您的任何帮助，您可以提供！

Answer 1

这样做的原因是，虽然你的模态有类modal，但它没有id modal，因此尝试用#modal选择器选择它将在文档中找不到任何内容，并返回null。由于无法在null值上访问属性，因此会抛出异常。将选择器切换到.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按钮时，我看到弹出的模态只有一个非功能关闭按钮。这不是你的意思吗？