javascript - 如何通过点击特定文本打开模态窗口

Question

我有一个 css 模态代码(由 html、css 和 JavaScript 组成)，它创建一个按钮并点击该按钮打开一个模态窗口

我想知道如何为我选择的任何文本启用相同的功能 - 例如，就像我们使用超链接一样。我只想点击特定的文本来打开模式窗口

如果有人可以编辑我的代码并给我更改后的编码，而不是仅仅提供原始代码来实现它，我将不胜感激(这对我来说可能很困难，因为我对此很陌生)

提前致谢

<h2>Enable Modal Window to open through this text</h2>

<!-- Trigger/Open The Modal -->
<button class="modal-button" href="#myModal1">• Click Me</button>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <p><span class="headertext">Modal Header Text</span></p>
    </div>
    <div class="modal-body">
<p><span class="bodytext">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></p>
     </div>
    </div>
  </div>
</div>

<h2>Enable Modal Window to open through this text</h2>

<!-- Trigger/Open The Modal -->
<button class="modal-button" href="#myModal2">• Click Me</button>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <p><span class="headertext">Modal Header Text</span></p>
    </div>
    <div class="modal-body">
<p><span class="bodytext">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></p>
     </div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* The Modal (background) */
.modal {
    font-family: 'Quicksand', sans-serif;
    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 {
    color: white;
    position: relative;
    background-color: #171B20;
    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 Close Button */
.close {
    color: #F0B823;
    float: right;
    font-size: 40px;
    font-weight: bold;
}

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

.modal-header {
    padding: 2px 16px;
    background-color: #171B20;
    color: #F0B823;
}

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

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20; 
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  width: auto;
  font-size: 200%;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 60%;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 30px;
}

.bodytext {
   font-family: 'Quicksand', sans-serif;
   display: block;
   padding: 10px;                                                                                                                                  
}

@media screen and (min-width: 767px) {
.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 35%;
 }
}

p {
   display: block;
   margin: 0;
} 





// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

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

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
 btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
 }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
 spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
    }
 }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
     for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
     }
    }
}

Answer 1

您可以使用 Bootstrap ，但也可以通过稍微更改代码来实现相同的目的。

这是工作代码，事情变了。1) 为标签添加了 Class 和 href 属性。2) 更改了您选择所有按钮的脚本，而不是读取所有类型的控件。

$(function(){

// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

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

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
 btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
 }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
 spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
    }
 }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
     for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
     }
    }
}
})

/* The Modal (background) */
.modal {
    font-family: 'Quicksand', sans-serif;
    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 {
    color: white;
    position: relative;
    background-color: #171B20;
    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 Close Button */
.close {
    color: #F0B823;
    float: right;
    font-size: 40px;
    font-weight: bold;
}

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

.modal-header {
    padding: 2px 16px;
    background-color: #171B20;
    color: #F0B823;
}

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

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20; 
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  width: auto;
  font-size: 200%;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 60%;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 30px;
}

.bodytext {
   font-family: 'Quicksand', sans-serif;
   display: block;
   padding: 10px;                                                                                                                                  
}

@media screen and (min-width: 767px) {
.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 35%;
 }
}

p {
   display: block;
   margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class='modal-button' href="#myModal1">Enable Modal Window to open through this text</h2>

<!-- Trigger/Open The Modal -->
<button class="modal-button" href="#myModal1">• Click Me</button>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <p><span class="headertext">Modal Header Text</span></p>
    </div>
    <div class="modal-body">
<p><span class="bodytext">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></p>
     </div>
    </div>
  </div>
</div>

<h2>Enable Modal Window to open through this text</h2>

<!-- Trigger/Open The Modal -->
<button class="modal-button" href="#myModal2">• Click Me</button>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <p><span class="headertext">Modal Header Text</span></p>
    </div>
    <div class="modal-body">
<p><span class="bodytext">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></p>
     </div>
    </div>
  </div>
</div>