Javascript 如何通过点击特定文本打开模式窗口

我有一个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>

启用模式窗口以通过此文本打开
•点击我
×
模态标题文本

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本在内的Aldus PageMaker等桌面出版软件的发布，Lorem Ipsum自15世纪以来一直是行业标准的虚拟文本，当一个不知名的印刷商拿着一个铅字厨房，把它拼凑成一本铅字样本书时。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

启用模式窗口以通过此文本打开
•点击我
×
模态标题文本

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本在内的Aldus PageMaker等桌面出版软件的发布，Lorem Ipsum自15世纪以来一直是行业标准的虚拟文本，当一个不知名的印刷商拿着一个铅字厨房，把它拼凑成一本铅字样本书时。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

@导入url（'https://fonts.googleapis.com/css?family=Quicksand&display=swap');
/*模态（背景）*/
.莫代尔{
字体系列：“流沙”，无衬线；
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
颜色：白色；
位置：相对位置；
背景色：#171B20；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：80%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
@关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
/*关闭按钮*/
.结束{
颜色：F0B823；
浮动：对；
字体大小：40px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#fff；
文字装饰：无；
光标：指针；
}
.模态标题{
填充：2x16px；
背景色：#171B20；
颜色：F0B823；
}
.模态体{填充：2px 16px；}
.模态按钮{
字体系列：“流沙”，无衬线；
背景色：#171B20；
边界：无；
颜色：白色；
填充：8px 16px；
文本对齐：左对齐；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
-webkit转换持续时间：0.4s；/*Safari*/
过渡时间：0.4s；
光标：指针；
宽度：自动；
字体大小：200%；
}
.模式按钮：悬停{
背景色：#171B20；
颜色：F0B823；
}
图{
保证金：自动；
显示：块；
高度：自动；
宽度：60%；
}
.标题文字{
字体系列：“流沙”，无衬线；
显示：块；
文本对齐：居中；
字体大小：30px；
}
.正文{
字体系列：“流沙”，无衬线；
显示：块；
填充：10px；
}
@媒体屏幕和屏幕（最小宽度：767px）{
图{
保证金：自动；
显示：块；
高度：自动；
宽度：35%；
}
}
p{
显示：块；
保证金：0；
} 
//获取打开模式对话框的按钮
var btn=document.queryselectoral（“button.modal button”）；
//所有页面模态
var modals=document.querySelectorAll（'.modal'）；
//获取关闭模态的元素
var sp
@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";    
     }
    }
}