Question

我有一个模式弹出窗口，当我单击按钮时，我试图在其中触发它。但是该按钮位于其他文件夹和文件中。我可以链接吗？

MODAL：（main.html）

<div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Welcome, New White Card Holder!</h2>
    </div>
    <div class="modal-body spacer-left spacer-right">
      <br>
      <h3>Congratulations, you are entitled for a 30-day free trial of our Elite Membership.</h3>
      <h3>If you wish to avail of our other membership options, click here.</h3>
      <h3>Enjoy a wealth of deals for wellness!</h3>
      <br>
    </div>
    <div class="modal-footer">
    </div>
  </div>

JAVASCRIPT：

var modal = document.getElementById('myModal');

var btn = document.getElementById("");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

注册按钮：

<input type="submit" class="btn form-control color-white mwc-orange-background-color" id="register" name="register" value="REGISTER">

folders

再次尝试将注册按钮转到“ var btn = document.getElementById（“”）;“在“ modal_popup.js”文件中，但两者均由文件夹分开，如我的图片所示。我想知道是否可以这样做，如果可以，我应该在“ document.getElementById（“”）“中添加什么？

Answer 1

类型为“ submit”的按钮将重新加载页面，因为Submit用于表单将表单数据发布到服务器。尝试将类型更改为按钮。如果未指定类型，则不同的浏览器默认按钮将具有不同的行为。
我猜您的输入元素不是按钮，所以我将其改为按钮标签。
您的btn变量应为var btn = document.getElementById("register");
如果模式不是DOM的一部分，则它将不起作用。确保HTML与按钮在同一页上。

Answer 2

在register.html中尝试以下内容：

<jsp:element name="script">
    <jsp:attribute name="type">text/javascript</jsp:attribute>  
        <jsp:attribute name="src">
           <c:url value="/pages/js/modal_popup.js"/>
        </jsp:attribute>
    <jsp:body></jsp:body>
</jsp:element>

在不同的html文件夹和文件上使用document.getElementById获取按钮名称

2 个答案: