我有一个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";
}
}
}
答案 0 :(得分：1)
您可以使用引导程序，但也可以通过稍微更改代码来实现相同的目的。
这是工作代码， 事情变了。 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>
答案 1 :(得分：0)
看看您发布的代码，您似乎偶然发现了一些引导示例。 Bootstrap是一个前端框架。有关更多信息，请参见：https://getbootstrap.com/
为了打开引导程序模态，您还需要包括引导程序javascript文件。
特定于模式的文档可以在这里找到：https://getbootstrap.com/docs/4.3/components/modal/