[英]Select ID & Class Name by jquery Within Multiple Classes
How to get id (mymodal, mybtn) and to get Class (close) in span Element in JavaScript.如何在 JavaScript 的 span 元素中获取 id (mymodal, mybtn) 并获取 Class (close)。 i want to creat a Modal Pop Up Box in CSS & JS.我想在 CSS 和 JS 中创建一个模态弹出框。 pleas find the atached link that explain the code请找到解释代码的附加链接
div class="header" id="hd">
<div class="overlay">
<ul class="bxslider">
<li>
<h2>welcome to <span>plus resturent</span></h2>
<h3>the best tasting experience</h3>
<p>Olive is a Resturant,coffee roastery located on Jordan.
we have awesome recips and the most talented chefs in town!</p>
<button class="btn" id="mybtn">creat account</button>
<div id="mymodal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" id="spn">×</span>
<h2>modal header</h2>
</div>
<div class="modal-body">
<p>kkcmsakfm.sdf</p>
</div>
<div class="modal-footer">
<h3>dgdsg</h3>
</div>
</div>
</div>
</li>
<li>
<h2>we sereve quality food</h2>
<h3></h3>
</li>
<li>
<h2>welcome to <span>plus resturent</span></h2>
<h3>welcome to slider three</h3>
</li>
</ul>
</div>
</div>
I hope this is what you are looking for我希望这就是你要找的
how to select a class or id using jquery如何 select 一个 class 或 id 使用 jquery
$(document).ready(function() {
$('#mybtn').click(function() {
$('#mymodal').show();
})
$('#mymodal .close').click(() => {
$('#mymodal').hide();
})
})
note: iam selectiing mybtn id which is unique in current html file, iam also selecting close class with mymodal id so that no other close class will be called(if any exist).注意:我正在选择在当前 html 文件中唯一的 mybtn id,我还选择了带有 mymodal id 的关闭 class,这样就不会调用其他关闭 class(如果存在)。 here iam opening a modal and closing it我在这里打开一个模态并关闭它
below code is with javascript下面的代码是 javascript
const mymodal = document.getElementById('mymodal');
const close = document.querySelector('#mymodal .close');
const mybtn = document.getElementById('mybtn');
mybtn.addEventListener('click', () => {
mymodal.style.display = 'inline';
})
close.addEventListener('click', () => {
mymodal.style.display = 'none';
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.