Модал не будет отображаться - PullRequest
Новая
       0

Модал не будет отображаться

2 голосов
/ 05 марта 2020

Я примерно в 24 секундах от того, чтобы разжечь свое нижнее белье в отчаянии.

По сути, я делаю простую форму контактной информации, которая отправит входные данные на внешнюю страницу PHP для обработки, и , соответствующий этому вопросу, при отправке всплывает второй модал, который подтверждает пользователю, что форма была отправлена. Выяснение того, как заставить форму оставаться на той же странице, когда вы нажимаете «отправить», является проблемой на следующий день; что я не понимаю, так это то, почему второй модал, который говорит: «Спасибо за ваш интерес, et c. et c.», не появится, когда вы нажмете кнопку «Отправить». Это сводит меня с ума!

Спасибо за вашу помощь, я программист-любитель и открыт для любых советов / критических замечаний. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<style>
    .modal {
    display: none;
    position: fixed;
    z-index: 1;
    overflow: scroll;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid;
    width: 95%;
    position: relative;
}

.modal2 {
    display: none;
    position: fixed;
    z-index: 1;
    overflow: scroll;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal2-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid;
    width: 95%;
    position: relative;
}
</style>

<button id="myButton">Contact</button>

<div id="myModal" class="modal">
    <div action="" class="modal-content">
        <span id="close">&times;</span>
        <p class="formHeader">Let's Work Together...</p>
        <p id="formSubheader">Name</p>
        <input type="type" name="firstName" placeholder="First" class="inputBox1">
        <input type="type" name="lastName" placeholder="Last" class="inputBox1">
        <p id="formSubheader">Email</p>
        <input type="email" name="email" placeholder="Example@Email.com" class="inputBox2">
        <p id="formSubheader">Phone</p>
        <input type="tel" name="phone" class="inputBox3" placeholder="###-###-####">
        <p id="formSubheader">Project Description</p>
        <textarea name="description" class="inputBox4"></textarea>
        <br>
        <button type="submit" id="myButton2">Submit</button>
    </div>
</div>

<div id="myModal2" class="modal2">
    <div class="modal2-content">
        <span id="close">&times;</span>
        <p class="formHeader2">Thank you for your interest. I will get back to you soon!</p>
    </div>
</div>

<script>
    var modal = document.getElementById("myModal");
    var modal2 = document.getElementById("myModal2");
    var btn = document.getElementById("myButton");
    var btn2 = document.getElementById("myButton2");
    var close = document.getElementById("close");

    btn.onclick = function() {
        modal.style.display = "block";
    }
    btn2.onclick = function() {
        modal.style.display = "none";
        modal2.style.display = "block";
    }
    close.onclick = function() {
        modal.style.display = "none";
    }
    window.onclick = function(event) {
        if (event.target == modal) 
            modal.style.display = "none";
            modal2.style.display = "none";
        }
    </script>
</body>
</html>

1 Ответ

3 голосов
/ 05 марта 2020

Ваша проблема заключается в следующем фрагменте кода: 

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

Я не уверен, что вы собираетесь с этим делать, но помните, если в вашем утверждении if нет фигурных скобок , тогда будет выполняться только строка непосредственно после вашего условия if. Ваша вторая строка будет всегда исполняться. Таким образом, вы фактически скрываете modal2 на каждом событии клика (с момента прослушивания window.onclick). Я не думаю, что вы этого хотите.

Пример: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      overflow: scroll;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
    }
    
    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid;
      width: 95%;
      position: relative;
    }
    
    .modal2 {
      display: none;
      position: fixed;
      z-index: 1;
      overflow: scroll;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
    }
    
    .modal2-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid;
      width: 95%;
      position: relative;
    }
  </style>

  <button id="myButton">Contact</button>

  <div id="myModal" class="modal">
    <div action="" class="modal-content">
      <span id="close">&times;</span>
      <p class="formHeader">Let's Work Together...</p>
      <p id="formSubheader">Name</p>
      <input type="type" name="firstName" placeholder="First" class="inputBox1">
      <input type="type" name="lastName" placeholder="Last" class="inputBox1">
      <p id="formSubheader">Email</p>
      <input type="email" name="email" placeholder="Example@Email.com" class="inputBox2">
      <p id="formSubheader">Phone</p>
      <input type="tel" name="phone" class="inputBox3" placeholder="###-###-####">
      <p id="formSubheader">Project Description</p>
      <textarea name="description" class="inputBox4"></textarea>
      <br>
      <button type="submit" id="myButton2">Submit</button>
    </div>
  </div>

  <div id="myModal2" class="modal2">
    <div class="modal2-content">
      <span id="close">&times;</span>
      <p class="formHeader2">Thank you for your interest. I will get back to you soon!</p>
    </div>
  </div>

  <script>
    var modal = document.getElementById("myModal");
    var modal2 = document.getElementById("myModal2");
    var btn = document.getElementById("myButton");
    var btn2 = document.getElementById("myButton2");
    var close = document.getElementById("close");

    btn.onclick = function() {
      modal.style.display = "block";
    }
    btn2.onclick = function() {
      modal.style.display = "none";
      modal2.style.display = "block";
    }
    close.onclick = function() {
      modal.style.display = "none";
    }

    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
        modal2.style.display = "none";
      }
    }
  </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...