HTML-如何自动生成无限不同的模态？

时间：2019-06-07 06:49:34

标签： javascript jquery html css

我目前正在使用w3school的To-do-list tutorial创建一个Project Manager网站。我添加了一个详细信息按钮（...），该按钮显示一个模式，该模式显示有关该任务的信息，并且我必须手动为这些任务创建模式。
我的问题是：有没有办法为列表中的每个元素生成无限不同的模态。 

// 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>

2 个答案:

答案 0 :(得分：0)

请按照以下步骤操作-

  1. 在要显示模式的页面中创建一个<div id="dynamicDiv">
  2. 使用JS手动将模式描述以字符串形式写入每个模式的变量var modalDesc = '... my modal description as html ...'中
  3. 将字符串放在div内，例如-document.getElementById('dynamicDiv').innerHTML = modalDesc1 + '<br>' + modalDesc2 ...

已更新

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

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

答案 1 :(得分：0)

这应该有效

  1. 如果可以避免，您不应直接使用CSS更改样式。更好地更改元素className（使用.classList.add / .remove / .toggle）
  2. 最好不要使用.onclick处理程序，而应使用
    .addEventListener('click', /* function reference here */)
  3. 您不需要无限多个单击处理程序，只需在文档上使用单击处理程序，单击事件就会冒泡到文档（如果未被中断），您可以在其中检查事件的.target
  4. document.getElementsByClassName是 live HTMLCollection。这意味着，如果您在该类中动态添加新元素或删除现有元素，则它将即时反映在该HTMLCollection的项目中。
  5. 由于您同时添加了.details和.modals，因此它们在各自的HTML集合details和modals中具有相同的索引。因此，我检查了.detail HTMLCollection中单击的details元素的索引，然后切换了className集合中具有相同索引的元素的modals。
  6. 删除所有静态HTML模式，除了一个模式外，给ID modal-template。单击Add按钮时，您将克隆此模板（.cloneNode(true)），删除ID，在“到期日期”中添加类并更改计数，然后追加到正文

console.clear();
// 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 span = document.getElementsByClassName("modalclose");
var modalTemplate = document.getElementById('modal-template')

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 clone = modalTemplate.cloneNode(true);
  clone.removeAttribute('id')
  clone.classList.add('modal')
  
  clone.querySelector('.due-date-count').insertAdjacentText('beforeBegin', count)
  clone.querySelector('.due-date-count').remove()
  document.body.appendChild(clone, 'beforeEnd')
  

}


function closeModal(modal) {
  modal.classList.remove('visible')
}
function openModal(modal) {
  modal.classList.add('visible')
}
function toggleModal(modal) {
  modal.classList.toggle('visible')
}

// Funtion of detail button 

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('detail')) {
    toggleModal(modal[Array.from(detail).indexOf(e.target)])
  } else if (!e.target.closest('.modal-content')) {
    Array.from(modal).forEach(function(modal) {closeModal(modal)})
  } else if (e.target.classList.contains('modalclose')){
    closeModal(e.target.closest('.modal'))
  }
})
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;
}

#modal-template {
  display: none;
}


/* 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.visible {
  display: block;
}


/* 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="modal-template">

  <!-- 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 date <span class="due-date-count"></span>:</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>

相关问题
最新问题