HTML-如何自动生成无限不同的模态? [英] HTML-How to automatically generate infinite different modals?

查看：82
本文介绍了HTML-如何自动生成无限不同的模态?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在使用w3school的待办事项教程.我添加了一个详细信息按钮(...)，该按钮显示一个模式，该模式显示有关该任务的信息，并且我必须手动为这些任务创建模式.
我的问题是:有没有办法为列表中的每个元素生成无限不同的模态.

I am currently working on creating a Project Manager website using w3school's To-do-list tutorial. I have added a detail button (the ...) that shows a modal that shows information about the task, and I have to manually create the modal for the tasks.
My question is: Is there any way to generate infinitely different modal for each element on the list. 

// Get the modal
var modal = document.getElementsByClassName("modal");
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
// Click on a detail button to show detail of the current list item
var detail = document.getElementsByClassName("detail");
var count = 0; // count number of task (must < then 10)
var maxcount = 10;

// 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 {
    if (count < maxcount) {
      count = count + 1;
      document.getElementById("myUL").appendChild(li);
    }
  }
  document.getElementById("myInput").value = "";
  // Create close button for each element
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);
  // Create detail button for each element
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u2026");
  span.className = "detail";
  span.appendChild(txt);
  li.appendChild(span);
  // Function of close button
  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      count = count - 1;
      var div = this.parentElement;
      div.style.display = "none";
    }
  }

  var detail = document.getElementsByClassName("detail");
  var modal = document.getElementsByClassName("modal");
  var span = document.getElementsByClassName("modalclose");
  // Funtion of detail button 

  detail[0].onclick = function() {
    modal[0].style.display = "block";
  }
  span[0].onclick = function() {
    modal[0].style.display = "none";
  }
  window.onclick = function(event0) {
    if (event0.target == modal[0]) {
      modal[0].style.display = "none";
    }
  }

  detail[1].onclick = function() {
    modal[1].style.display = "block";
  }
  span[1].onclick = function() {
    modal[1].style.display = "none";
  }
  window.onclick = function(event1) {
    if (event1.target == modal[1]) {
      modal[1].style.display = "none";
    }
  }

  detail[2].onclick = function() {
    modal[2].style.display = "block";
  }
  span[2].onclick = function() {
    modal[2].style.display = "none";
  }
  window.onclick = function(event2) {
    if (event2.target == modal[2]) {
      modal[2].style.display = "none";
    }
  }

  detail[3].onclick = function() {
    modal[3].style.display = "block";
  }
  span[3].onclick = function() {
    modal[3].style.display = "none";
  }
  window.onclick = function(event3) {
    if (event3.target == modal[3]) {
      modal[3].style.display = "none";
    }
  }

  detail[4].onclick = function() {
    modal[4].style.display = "block";
  }
  span[4].onclick = function() {
    modal[4].style.display = "none";
  }
  window.onclick = function(event4) {
    if (event4.target == modal[4]) {
      modal[4].style.display = "none";
    }
  }

  detail[5].onclick = function() {
    modal[5].style.display = "block";
  }
  span[5].onclick = function() {
    modal[5].style.display = "none";
  }
  window.onclick = function(event5) {
    if (event5.target == modal[5]) {
      modal[5].style.display = "none";
    }
  }

  detail[6].onclick = function() {
    modal[6].style.display = "block";
  }
  span[6].onclick = function() {
    modal[6].style.display = "none";
  }
  window.onclick = function(event6) {
    if (event6.target == modal[6]) {
      modal[6].style.display = "none";
    }
  }

  detail[7].onclick = function() {
    modal[7].style.display = "block";
  }
  span[7].onclick = function() {
    modal[7].style.display = "none";
  }
  window.onclick = function(event7) {
    if (event7.target == modal[7]) {
      modal[7].style.display = "none";
    }
  }

  detail[8].onclick = function() {
    modal[8].style.display = "block";
  }
  span[8].onclick = function() {
    modal[8].style.display = "none";
  }
  window.onclick = function(event8) {
    if (event8.target == modal[8]) {
      modal[8].style.display = "none";
    }
  }

  detail[9].onclick = function() {
    modal[9].style.display = "block";
  }
  span[9].onclick = function() {
    modal[9].style.display = "none";
  }
  window.onclick = function(event9) {
    if (event9.target == modal[9]) {
      modal[9].style.display = "none";
    }
  }

}

body {
  margin: 0;
  min-width: 250px;
}


/* Include the padding and border in an element's total width and height */

* {
  box-sizing: border-box;
}


/* Remove margins and padding from the list */

ul {
  margin: 0;
  padding: 0;
}


/* Style the list items */

ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  width: 25%;
  /* 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 detail button */

.detail {
  position: absolute;
  right: 50px;
  top: 0;
  padding: 12px 16px 11px 16px;
}

.detail:hover {
  background-color: #005ce6;
  color: white;
}


/* Style the header */

.header {
  background-color: #0071C5;
  padding: 30px 40px;
  color: white;
  text-align: center;
  width: 25%;
}


/* Clear floats after the header */

.header:after {
  content: "";
  display: table;
  clear: both;
}


/* Style the input */

input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 70%;
  padding: 10px;
  float: left;
  font-size: 16px;
}


/* Style the "Add" button */

.addBtn {
  padding: 10px;
  width: 20%;
  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;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  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 */

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}


/* The modalClose Button */

.modalclose {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modalclose:hover,
.modalclose:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  padding: 20px 16px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

<div id="myDIV" class="header">
  <h2 style="margin:5px">
    <p contenteditable="true">Edit task's name</p>
  </h2>
  <input type="text" id="myInput" placeholder="Title...">
  <span onclick="newElement()" class="addBtn"> Add </span>
</div>

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

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalclose">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Due date1:</p>
      <input type="date" name="duedate">
      <br />
      <br />
      <p>In charge person WWID:</p>
      <input type="number" name="WWID">
      <br />
      <br />
      <p>Comment:</p>
      <input type="text" name="WWID" placeholder="Insert your comment here...">
      <br />
      <br />
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalclose">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Due date2:</p>
      <input type="date" name="duedate">
      <br />
      <br />
      <p>In charge person WWID:</p>
      <input type="number" name="WWID">
      <br />
      <br />
      <p>Comment:</p>
      <input type="text" name="WWID" placeholder="Insert your comment here...">
      <br />
      <br />
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalclose">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Due date3:</p>
      <input type="date" name="duedate">
      <br />
      <br />
      <p>In charge person WWID:</p>
      <input type="number" name="WWID">
      <br />
      <br />
      <p>Comment:</p>
      <input type="text" name="WWID" placeholder="Insert your comment here...">
      <br />
      <br />
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalclose">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Due date4:</p>
      <input type="date" name="duedate">
      <br />
      <br />
      <p>In charge person WWID:</p>
      <input type="number" name="WWID">
      <br />
      <br />
      <p>Comment:</p>
      <input type="text" name="WWID" placeholder="Insert your comment here...">
      <br />
      <br />
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalclose">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Due date5:</p>
      <input type="date" name="duedate">
      <br />
      <br />
      <p>In charge person WWID:</p>
      <input type="number" name="WWID">
      <br />
      <br />
      <p>Comment:</p>
      <input type="text" name="WWID" placeholder="Insert your comment here...">
      <br />
      <br />
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalclose">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Due date6:</p>
      <input type="date" name="duedate">
      <br />
      <br />
      <p>In charge person WWID:</p>
      <input type="number" name="WWID">
      <br />
      <br />
      <p>Comment:</p>
      <input type="text" name="WWID" placeholder="Insert your comment here...">
      <br />
      <br />
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalclose">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Due date7:</p>
      <input type="date" name="duedate">
      <br />
      <br />
      <p>In charge person WWID:</p>
      <input type="number" name="WWID">
      <br />
      <br />
      <p>Comment:</p>
      <input type="text" name="WWID" placeholder="Insert your comment here...">
      <br />
      <br />
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalclose">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Due date8:</p>
      <input type="date" name="duedate">
      <br />
      <br />
      <p>In charge person WWID:</p>
      <input type="number" name="WWID">
      <br />
      <br />
      <p>Comment:</p>
      <input type="text" name="WWID" placeholder="Insert your comment here...">
      <br />
      <br />
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalclose">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Due date9:</p>
      <input type="date" name="duedate">
      <br />
      <br />
      <p>In charge person WWID:</p>
      <input type="number" name="WWID">
      <br />
      <br />
      <p>Comment:</p>
      <input type="text" name="WWID" placeholder="Insert your comment here...">
      <br />
      <br />
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalclose">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Due date10:</p>
      <input type="date" name="duedate">
      <br />
      <br />
      <p>In charge person WWID:</p>
      <input type="number" name="WWID">
      <br />
      <br />
      <p>Comment:</p>
      <input type="text" name="WWID" placeholder="Insert your comment here...">
      <br />
      <br />
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

推荐答案

请按照以下步骤操作-

  1. 在您要显示模态的页面中创建一个<div id="dynamicDiv">
  2. 使用JS手动将模式描述作为字符串写在变量中，例如每个模式的var modalDesc = '... my modal description as html ...'
  3. 将字符串放入div内--document.getElementById('dynamicDiv').innerHTML = modalDesc1 + '<br>' + modalDesc2 ...
  1. Create a <div id="dynamicDiv"> in your page where you want to show the modals
  2. Using JS manually write the modal descriptions as a string in a variable like var modalDesc = '... my modal description as html ...' for each modal
  3. Put the string inside the div like - document.getElementById('dynamicDiv').innerHTML = modalDesc1 + '<br>' + modalDesc2 ...

已更新

在多种情况下，您可以使用循环，但仅在模态结构相同但信息或结构值不同时才起作用.

For multiple cases you may use loops but works only when your modal structures are same but information or the structural values are different.

否则，您将不得不以不同的方式声明每个模式

Else you'll have to declare each modal in different ways

这篇关于HTML-如何自动生成无限不同的模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆