Может ли кто-нибудь показать мне, почему мои модальные окна не открываются? - PullRequest
Новая
       2

Может ли кто-нибудь показать мне, почему мои модальные окна не открываются?

0 голосов
/ 19 июня 2020

Чтобы увидеть модальную кнопку, заполните поля ввода и выберите день для вывода на

Я взял модальные окна и функции «todo» с сайта w3schools.com и изменил некоторые идентификаторов и классов. Я просматривал все некоторое время и, похоже, не могу найти проблему. Мне просто нужно еще раз взглянуть на него. 

var submitBtn = document.querySelector("#submitBtn");
 submitBtn.addEventListener("click", function(){
  event.preventDefault();
  var boxSelect = document.querySelector("#boxSelect");
  document.querySelector(`#b${boxSelect.value}NameOutput`).innerHTML = "<p>"+document.querySelector("#name").value+"</p>";
  document.querySelector(`#b${boxSelect.value}UserOutput`).innerHTML = "<p>"+document.querySelector("#user").value+"</p>";
  document.querySelector(`#b${boxSelect.value}LinkOutput`).innerHTML = "<p><a target='_blank' href='"+document.querySelector('#link').value+"'>Click Here for Recipe</a></p>";
  document.querySelector(`#myBtn${boxSelect.value}`).style.display = "block";
  });

  // Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.querySelector(`#myBtn${boxSelect.value}`);

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}
.square{
  border: 1px solid black;
  width: 15rem;
  height: 15rem;
  float: left;
  margin:10px;
}

#formContainer {
  position: relative;
  float: left;
}

.boxTitle {
  text-align: center;
  margin-top: 1em;
}

.boxOutputContainer {
  text-align: center;
}

/* 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;
}

.myBtn {
  display: none;
}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;

  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

/* Style the header */
.header {
  background-color: black;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
#myInput {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="row col-sm-12">
    <div class="square">
  <h1 class="boxTitle">Sunday</h1>
  <div class="boxOutputContainer">
    <div class="outputItem" id="b1NameOutput"></div>
    <div class="outputItem" id="b1UserOutput"></div>
    <div class="outputItem" id="b1LinkOutput"></div>
    <button class="myBtn" id="myBtn1">Open Modal</button>
  </div>
</div>

<div class="square">
  <h1 class="boxTitle">Monday</h1>
  <div class="boxOutputContainer">
    <div class="outputItem" id="b2NameOutput"></div>
    <div class="outputItem" id="b2UserOutput"></div>
    <div class="outputItem" id="b2LinkOutput"></div>
    <button class="myBtn" id="myBtn2">Open Modal</button>
  </div>
</div>

<div class="square">
  <h1 class="boxTitle">Tuesday</h1>
  <div class="boxOutputContainer">
    <div class="outputItem" id="b3NameOutput"></div>
    <div class="outputItem" id="b3UserOutput"></div>
    <div class="outputItem" id="b3LinkOutput"></div>
    <button class="myBtn" id="myBtn3">Open Modal</button>
  </div>
 </div>

<div class="square">
<h1 class="boxTitle">Wednesday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b4NameOutput"></div>
<div class="outputItem" id="b4UserOutput"></div>
<div class="outputItem" id="b4LinkOutput"></div>
<button class="myBtn" id="myBtn4">Open Modal</button>
</div>
</div>

</div>

<div class="row col-lg-12">
<div class="square">
<h1 class="boxTitle">Thursday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b5NameOutput"></div>
<div class="outputItem" id="b5UserOutput"></div>
<div class="outputItem" id="b5LinkOutput"></div>
<button class="myBtn" id="myBtn5">Open Modal</button>

</div>
</div>

<div class="square">
<h1 class="boxTitle">Friday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b6NameOutput"></div>
<div class="outputItem" id="b6UserOutput"></div>
<div class="outputItem" id="b6LinkOutput"></div>
<button class="myBtn" id="myBtn6">Open Modal</button>
</div>
</div>

<div class="square">
<h1 class="boxTitle">Saturday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b7NameOutput"></div>
<div class="outputItem" id="b7UserOutput"></div>
<div class="outputItem" id="b7LinkOutput"></div>
<button class="myBtn" id="myBtn7">Open Modal</button>
</div>
</div>

</div>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="myDIV" class="header">
  <h2>My To Do List</h2>
  <input type="text" id="myInput" placeholder="Title...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="myUL"></ul>

  </div>

</div>



<div class="row">
<div id="formContainer">
  <form>
    <label for="name">Recipe name:</label>
    <input required type="text" id="name">



    <label for="user">Who's making it?</label>
    <input required type="text" id="user">

    <label for="link">Recipe Link</label>
    <input type="text" id="link">
    <label for="boxSelect">Which day?</label>
    <select id="boxSelect">
      <option value="1">Sunday</option>
      <option value="2">Monday</option>
      <option value="3">Tuesday</option>
      <option value="4">Wednesday</option>
      <option value="5">Thursday</option>
      <option value="6">Friday</option>
      <option value="7">Saturday</option>
    </select>
    <input type="submit" id="submitBtn">
  </form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js">
</script>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Решение состоит в том, что этот код должен быть в прослушивателе событий кнопки отправки. Вы хотите выбрать кнопку Open Modal только после того, как вы нажали кнопку отправки, и добавить функцию onClick сразу после: 

  var boxSelect = document.querySelector("#boxSelect");
  var btn = document.querySelector(`#myBtn${boxSelect.value}`);
  btn.onclick = function () {
      modal.style.display = "block";
  };
0 голосов
/ 19 июня 2020

Это потому, что вы сказали btn.onclick, чтобы показать модальное окно, но вы не определили btn. Это должно быть submitBtn.onclick.

У меня есть ссылка jsfiddle, потому что она не работает с фрагментом должным образом : https://jsfiddle.net/nukeboy212/7yj0rhsL/8/

...