Я пытаюсь показать два разных текста в HTML, используя модальное представление, но JavaScript перекрывается и не работает должным образом - PullRequest
Новая
       27

Я пытаюсь показать два разных текста в HTML, используя модальное представление, но JavaScript перекрывается и не работает должным образом

0 голосов
/ 17 января 2019

По сути, у меня есть страница регистрации, которую я пытаюсь завершить, и у флажка, где вы согласны с условиями, у меня есть этот текст I agree to NAME's "Terms & Conditions" and their "Privacy Policy". Между двойными кавычками есть два отдельных абзаца с вызовами по клику для функции JavaScriptв два разных файла ".js".Первый представляет звонки и операции, выполненные для первой кнопки «Условия» и так далее.Когда я пытаюсь их смешать, они либо показывают один и тот же текст, либо вообще ничего не показывают.Я также оставлю небольшой кусочек кода, потому что считаю, что мне легче понять мою проблему.

Я пытался смешать их вместе в один файл 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";
  }
}

1 Ответ

0 голосов
/ 17 января 2019

Следующий код ведет себя так, как вы ожидали?Вам нужен один файл 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>

Ура!

...