我正在尝试使用模态视图在 html 中显示两个不同的文本，但 javascript 重叠并且无法正常工作

Question

基本上，我有一个我正在尝试完成的注册页面，在您同意条款的复选框中，我有这个文本 I agree to NAME's "Terms & Conditions" and their "Privacy Policy". 在双引号之间有两个单独的段落，点击调用 JavaScript 函数到两个不同的“.js”文件。第一个表示对第一个按钮 "Terms & Conditions" 进行的调用和操作，依此类推。当我尝试混合使用它们时，它们要么显示相同的文本，要么根本不显示任何内容。我也会留下一小段代码，因为我相信这样更容易理解我的问题。

我试过将它们混合在一个 js 文件中，但之后效果更差。当我取出其中一个文件时，另一个文件正常工作。

<label class="auth_margin"><input id="agree" type="checkbox" name="agree"> I agree to NAME's </label><p id="termsBtn">&nbsp;Terms & Conditions</p> and their <p id="privacyBtn">Privacy Policy.</p><br/>

和 JavaScript 个文件：

var modal = document.getElementById('termsModal');
var btn = document.getElementById("termsBtn");
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 == pmodal) {
    pmodal.style.display = "none";
  }
}

var pmodal = document.getElementById('privacyModal');
var pbtn = document.getElementById("privacyBtn");
var span = document.getElementsByClassName("close")[0];
pbtn.onclick = function() {
  pmodal.style.display = "block";
}
span.onclick = function() {
  pmodal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == pmodal) {
    pmodal.style.display = "none";
  }
}

Answer 1

以下代码的行为是否符合您的预期？你需要一个单独的 js 文件。有一些样式编辑，但您可以在 CSS 之后更改它们。此外，对于两个可点击的文本，我更喜欢使用 <span> 而不是 <p>。区别在于 <p> 是块元素而 <span> 不是。他们在一条线上看起来更好（在我看来）。

没什么花哨的，简单的 html/css/js。

var tbtn = document.getElementById("termsBtn");
var pbtn = document.getElementById("privacyBtn");
var tmodal = document.getElementById('tmodal');
var pmodal = document.getElementById('pmodal');

tbtn.onclick = function() {
  pmodal.style.display = "none";
  tmodal.style.display = "block";
};

pbtn.onclick = function() {
  tmodal.style.display = "none";
  pmodal.style.display = "block";
};

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

#termsBtn,
#privacyBtn {
  color: blue;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<label class="auth_margin"><input id="agree" type="checkbox" name="agree"> I agree to NAME's </label><span id="termsBtn">&nbsp;Terms & Conditions</span> and their <span id="privacyBtn">Privacy Policy.</span><br/>

<div id="tmodal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text for Terms & Conditions</p>
  </div>
</div>

<div id="pmodal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text for Privacy Policy</p>
  </div>
</div>

干杯！

我正在尝试使用模态视图在 html 中显示两个不同的文本，但 javascript 重叠并且无法正常工作

I am trying to show two different texts in html using a modal view but the javascript overlaps and doesn't work properly

html

javascript

simplemodal