我试图定位一个没有id或class的模式。这是因为我的团队页面是由CMS控制的，因此每次添加团队成员时，每个人都有一个不同的data-modal="NAME-I-WILL-NOT-KNOW"
我的CMS正在控制此代码的"NAME-I-WILL-NOT-KNOW"部分。
示例：客户创建了一个新的团队成员，名为“鲍勃·史密斯”。因此，我的HTML将导致：
按钮
<div class="button-wrap">
<a rel="modal:open" class="button is-danger is-rounded modal-button" data-modal-target="bobsmith" aria-haspopup="true">
<span>View Profile</span>
</a>
</div>
模式
<div id="modalopen" class="modal" data-modal="bobsmith">
</div>
我认为我可以针对某种document.querySelector定位。我尝试了几种方法，但以下方法感觉最接近。
var modal = document.querySelector("[data-modal=" + target + "]");
尽管，不用说，这是行不通的。
出于明显的原因，我创建了没有cms元素的
。
// Get the modal
var modal = document.querySelector("[data-modal=" + target + "]");
// Get the button that opens the modal
var btn = document.getElementById("modal_open");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("modal-close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.team {
text-align: center;
padding: 2.375em;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
}
.team img {
border-radius: 100%;
border: 0;
}
.team h3 {
color: #00315c;
font-size: 1rem;
font-weight: 700;
line-height: 1.45;
margin: 1rem 0 0 0;
}
.team h5 {
color: #b5b5b5;
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
line-height: 1.45;
margin-bottom: 1rem;
}
.team p {
color: #4a4a4a;
font-size: 1rem;
font-weight: 400;
line-height: 1.45;
margin-bottom: 1rem;
}
.team .button-wrap {
margin-bottom: 1rem;
}
.team .social li {
display: inline-block;
margin-left: 0.875rem;
}
.team .social li:first-child {
margin-left: 0rem;
}
.team-button-wrap {
margin-top: 1.15rem;
display: flex;
justify-content: center;
}
.home-team-intro .button-wrap {
display: none;
}
@media screen and (min-width: 769px),
print {
.modal-content {
width: 753px;
height: auto;
}
}
.modal-background {
background-color: rgba(18, 18, 18, 0.68);
}
.team-card-full {
background-color: white;
max-width: 100%;
position: relative;
border-radius: 8px;
padding: 2.375em;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 769px),
print {
.team-card-full {
display: flex;
flex-direction: row;
}
}
.team-card-full p {
text-align: left;
}
.team-card-full .profile {
display: flex;
flex-direction: column;
justify-content: center;
}
.team-card-full .profile img {
width: 130px;
height: 130px;
margin: 0 auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="hero is-medium">
<div class="hero-body">
<div class="container">
<div class="columns">
<!-- CARD 1 PREVIEW START -->
<div class="column">
<div class="card team">
<div class="card-head">
<img class="obj_fit" src="#">
<h3>Foo 1</h3>
<h5>Position</h5>
</div>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<div class="button-wrap">
<a id="modal_open" class="button is-danger is-rounded modal-button" data-modal-target="foo1" aria-haspopup="true">
<span>View Profile</span>
</a>
</div>
<!-- MODAL START -->
<div id="modal" class="modal" data-modal="foo1">
<div class="modal-background"></div>
<div class="modal-content">
<div class="team-card-full">
<div class="column is-12-mobile is-4-tablet profile">
<img src="#">
<h3>Foo 1</h3>
<h5>Position</h5>
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
<div class="column is-12-mobile is-8-tablet">
<div class="content">
<p>Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.</p>
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
<button class="modal-close is-large animated fadeIn" aria-label="close"></button>
</div>
</div>
<!-- MODAL END -->
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- CARD 1 PREVIEWEND -->
<!-- CARD 1 PREVIEW START -->
<div class="column">
<div class="card team">
<div class="card-head">
<img class="obj_fit" src="#">
<h3>Foo 2</h3>
<h5>Position</h5>
</div>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<div class="button-wrap">
<a id="modal_open" class="button is-danger is-rounded modal-button" data-modal-target="foo2" aria-haspopup="true">
<span>View Profile</span>
</a>
</div>
<!-- MODAL START -->
<div id="modal" class="modal" data-modal="foo2">
<div class="modal-background"></div>
<div class="modal-content">
<div class="team-card-full">
<div class="column is-12-mobile is-4-tablet profile">
<img src="#">
<h3>Foo 2</h3>
<h5>Position</h5>
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
<div class="column is-12-mobile is-8-tablet">
<div class="content">
<p>Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.</p>
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
<button class="modal-close is-large animated fadeIn" aria-label="close"></button>
</div>
</div>
<!-- MODAL END -->
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- CARD 1 PREVIEWEND -->
<!-- CARD 1 PREVIEW START -->
<div class="column">
<div class="card team">
<div class="card-head">
<img class="obj_fit" src="#">
<h3>Foo 3</h3>
<h5>Position</h5>
</div>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<div class="button-wrap">
<a id="modal_open" class="button is-danger is-rounded modal-button" data-modal-target="foo3" aria-haspopup="true">
<span>View Profile</span>
</a>
</div>
<!-- MODAL START -->
<div id="modal" class="modal" data-modal="foo3">
<div class="modal-background"></div>
<div class="modal-content">
<div class="team-card-full">
<div class="column is-12-mobile is-4-tablet profile">
<img src="#">
<h3>Foo 3</h3>
<h5>Position</h5>
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
<div class="column is-12-mobile is-8-tablet">
<div class="content">
<p>Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.</p>
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
<button class="modal-close is-large animated fadeIn" aria-label="close"></button>
</div>
</div>
<!-- MODAL END -->
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- CARD 1 PREVIEWEND -->
</div>
</div>
</div>
</section>
答案 0 :(得分：0)
document.querySelector('[data-modal]');
将select the first element that has a data-modal attribute，无论其值如何。
答案 1 :(得分：0)
您可以利用btn.onclick事件来定义模态：
btn.onclick = function openModal(event) {
var target = this.dataset.modalTarget
// Get the modal
modal = document.querySelector("[data-modal=" + target + "]");
modal.style.display = "block";
}
您还应该先定义modal var，然后使用modal在其他侦听器中添加一些保护。下面的代码段是一种纠正您的代码的方法：
var modal = undefined
// Get the button that opens the modal
var btn = document.getElementById("modal_open");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("modal-close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function openModal(event) {
var target = this.dataset.modalTarget
// Get the modal
modal = document.querySelector("[data-modal=" + target + "]");
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
if (modal === undefined) return
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (modal === undefined) return
if (event.target == modal) {
modal.style.display = "none";
}
}.team {
text-align: center;
padding: 2.375em;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
}
.team img {
border-radius: 100%;
border: 0;
}
.team h3 {
color: #00315c;
font-size: 1rem;
font-weight: 700;
line-height: 1.45;
margin: 1rem 0 0 0;
}
.team h5 {
color: #b5b5b5;
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
line-height: 1.45;
margin-bottom: 1rem;
}
.team p {
color: #4a4a4a;
font-size: 1rem;
font-weight: 400;
line-height: 1.45;
margin-bottom: 1rem;
}
.team .button-wrap {
margin-bottom: 1rem;
}
.team .social li {
display: inline-block;
margin-left: 0.875rem;
}
.team .social li:first-child {
margin-left: 0rem;
}
.team-button-wrap {
margin-top: 1.15rem;
display: flex;
justify-content: center;
}
.home-team-intro .button-wrap {
display: none;
}
@media screen and (min-width: 769px),
print {
.modal-content {
width: 753px;
height: auto;
}
}
.modal-background {
background-color: rgba(18, 18, 18, 0.68);
}
.team-card-full {
background-color: white;
max-width: 100%;
position: relative;
border-radius: 8px;
padding: 2.375em;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 769px),
print {
.team-card-full {
display: flex;
flex-direction: row;
}
}
.team-card-full p {
text-align: left;
}
.team-card-full .profile {
display: flex;
flex-direction: column;
justify-content: center;
}
.team-card-full .profile img {
width: 130px;
height: 130px;
margin: 0 auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="hero is-medium">
<div class="hero-body">
<div class="container">
<div class="columns">
<!-- CARD 1 PREVIEW START -->
<div class="column">
<div class="card team">
<div class="card-head">
<img class="obj_fit" src="#">
<h3>Foo 1</h3>
<h5>Position</h5>
</div>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<div class="button-wrap">
<a id="modal_open" class="button is-danger is-rounded modal-button" data-modal-target="foo1" aria-haspopup="true">
<span>View Profile</span>
</a>
</div>
<!-- MODAL START -->
<div id="modal" class="modal" data-modal="foo1">
<div class="modal-background"></div>
<div class="modal-content">
<div class="team-card-full">
<div class="column is-12-mobile is-4-tablet profile">
<img src="#">
<h3>Foo 1</h3>
<h5>Position</h5>
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
<div class="column is-12-mobile is-8-tablet">
<div class="content">
<p>Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.</p>
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
<button class="modal-close is-large animated fadeIn" aria-label="close"></button>
</div>
</div>
<!-- MODAL END -->
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- CARD 1 PREVIEWEND -->
<!-- CARD 1 PREVIEW START -->
<div class="column">
<div class="card team">
<div class="card-head">
<img class="obj_fit" src="#">
<h3>Foo 2</h3>
<h5>Position</h5>
</div>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<div class="button-wrap">
<a id="modal_open" class="button is-danger is-rounded modal-button" data-modal-target="foo2" aria-haspopup="true">
<span>View Profile</span>
</a>
</div>
<!-- MODAL START -->
<div id="modal" class="modal" data-modal="foo2">
<div class="modal-background"></div>
<div class="modal-content">
<div class="team-card-full">
<div class="column is-12-mobile is-4-tablet profile">
<img src="#">
<h3>Foo 2</h3>
<h5>Position</h5>
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
<div class="column is-12-mobile is-8-tablet">
<div class="content">
<p>Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.</p>
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
<button class="modal-close is-large animated fadeIn" aria-label="close"></button>
</div>
</div>
<!-- MODAL END -->
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- CARD 1 PREVIEWEND -->
<!-- CARD 1 PREVIEW START -->
<div class="column">
<div class="card team">
<div class="card-head">
<img class="obj_fit" src="#">
<h3>Foo 3</h3>
<h5>Position</h5>
</div>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<div class="button-wrap">
<a id="modal_open" class="button is-danger is-rounded modal-button" data-modal-target="foo3" aria-haspopup="true">
<span>View Profile</span>
</a>
</div>
<!-- MODAL START -->
<div id="modal" class="modal" data-modal="foo3">
<div class="modal-background"></div>
<div class="modal-content">
<div class="team-card-full">
<div class="column is-12-mobile is-4-tablet profile">
<img src="#">
<h3>Foo 3</h3>
<h5>Position</h5>
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
<div class="column is-12-mobile is-8-tablet">
<div class="content">
<p>Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.</p>
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
<button class="modal-close is-large animated fadeIn" aria-label="close"></button>
</div>
</div>
<!-- MODAL END -->
<div class="social">
<ul>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-facebook-f fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-instagram fa-lg"></i></a></li>
<li><a href="mailto:#" target="_blank"><i class="fal fa-envelope-open"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- CARD 1 PREVIEWEND -->
</div>
</div>
</div>
</section>
根据CMS如何以及是否描述变量target，可能有更好的解决方案适合您的问题。然后，您可以使用document.querySelectorAll('[data-modal-target]')同时将上述解决方案应用于所有按钮，它将返回NodeList并包含所有按钮。然后，您可以对其进行迭代。
答案 2 :(得分：-1)
您缺少一些引号。格式为"[data-modal='bobsmith']"。试试这个：
var modal = document.querySelector("[data-modal='" + target + "']");
答案 3 :(得分：-1)
感谢大家的帮助。您提供的答案使我想到了另一个问题，从而得出了总体答案。