提问人：Jenny 提问时间：11/16/2023 更新时间：11/16/2023 访问量：25
如果在模态之外单击，则关闭模态，但如果您单击上一个或下一个链接，则不会关闭模态
Close modal if clicked outside of modal but not if you click on the prev or next links
问：
如果您单击.modal外部，我希望模式框关闭，但如果您单击上一个或下一个链接，则不会关闭，我在最后一部分遇到了问题。我不确定如果单击上一个或下一个链接，如何防止模式关闭。接下来的按钮将滚动浏览不同的框，因此我需要它们可单击。任何帮助都是值得赞赏的。
window.addEventListener('load', setup);
const get = document.getElementById.bind(document);
const query = document.querySelector.bind(document);
function setup() {
let modalRoot = get('modal-root');
let button = get('modal-opener');
let modal = query('.modal');
modalRoot.addEventListener('click', rootClick);
button.addEventListener('click', openModal);
modal.addEventListener('click', modalClick);
function rootClick() {
modalRoot.classList.remove('visible');
}
function openModal() {
modalRoot.classList.add('visible');
}
function modalClick(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}#modal-root {
position: fixed;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.4);
left : 0;
top: 0;
width: 0px;
height : 0px;
opacity: 0;
transition: opacity 0.15s ease-out, width 0s linear 0.15s, height 0s linear 0.15s;
}
#modal-root.visible {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity 0.15s ease-out;
}
.modal {
margin: 0 auto;
width: 40%;
background-color: white;
padding: 20px;
border-radius: 5px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.prevslide, .nextslide{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: red;
font-weight: 700;
font-size: 20px;
transition: .6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.nextslide {
right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<button id="modal-opener">Open Modal</button>
</div>
<div id="modal-root">
<div class="modal">
<h3>Modal Header</h3>
<p>Modal contentt</p>
</div>
<a class="prevslide" >Previous</a><a class="nextslide">Next</a>
</div>答：
1赞
James
11/16/2023
#1
您可以在单击上一个/下一个按钮时停止事件传播。
window.addEventListener('load', setup);
const get = document.getElementById.bind(document);
const query = document.querySelector.bind(document);
function setup() {
let modalRoot = get('modal-root');
let button = get('modal-opener');
let modal = query('.modal');
modalRoot.addEventListener('click', rootClick);
button.addEventListener('click', openModal);
modal.addEventListener('click', modalClick);
let prevBtn = modalRoot.querySelector(".prevslide");
let nextBtn = modalRoot.querySelector(".nextslide");
prevBtn.addEventListener("click", e => e.stopPropagation());
nextBtn.addEventListener("click", e => e.stopPropagation());
function rootClick() {
modalRoot.classList.remove('visible');
}
function openModal() {
modalRoot.classList.add('visible');
}
function modalClick(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}#modal-root {
position: fixed;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.4);
left : 0;
top: 0;
width: 0px;
height : 0px;
opacity: 0;
transition: opacity 0.15s ease-out, width 0s linear 0.15s, height 0s linear 0.15s;
}
#modal-root.visible {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity 0.15s ease-out;
}
.modal {
margin: 0 auto;
width: 40%;
background-color: white;
padding: 20px;
border-radius: 5px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.prevslide, .nextslide{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: red;
font-weight: 700;
font-size: 20px;
transition: .6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.nextslide {
right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<button id="modal-opener">Open Modal</button>
</div>
<div id="modal-root">
<div class="modal">
<h3>Modal Header</h3>
<p>Modal contentt</p>
</div>
<a class="prevslide" >Previous</a><a class="nextslide">Next</a>
</div>
2赞
Burham B. Soliman
11/16/2023
#2
只需定义两个按钮并更改函数以检查单击的目标是否不是这两个按钮之一，rootClick()
检查代码段
window.addEventListener('load', setup);
const get = document.getElementById.bind(document);
const query = document.querySelector.bind(document);
function setup() {
let modalRoot = get('modal-root');
let button = get('modal-opener');
let modal = query('.modal');
// Define the both buttons
let prev = query('.prevslide')
let next = query('.nextslide')
modalRoot.addEventListener('click', rootClick);
button.addEventListener('click', openModal);
modal.addEventListener('click', modalClick);
function rootClick(e) {
// Create if statement to check the target
if(e.target != prev && e.target != next)
modalRoot.classList.remove('visible');
}
function openModal() {
modalRoot.classList.add('visible');
}
function modalClick(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}#modal-root {
position: fixed;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.4);
left : 0;
top: 0;
width: 0px;
height : 0px;
opacity: 0;
transition: opacity 0.15s ease-out, width 0s linear 0.15s, height 0s linear 0.15s;
}
#modal-root.visible {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity 0.15s ease-out;
}
.modal {
margin: 0 auto;
width: 40%;
background-color: white;
padding: 20px;
border-radius: 5px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.prevslide, .nextslide{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: red;
font-weight: 700;
font-size: 20px;
transition: .6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.nextslide {
right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<button id="modal-opener">Open Modal</button>
</div>
<div id="modal-root">
<div class="modal">
<h3>Modal Header</h3>
<p>Modal contentt</p>
</div>
<a class="prevslide" >Previous</a><a class="nextslide">Next</a>
</div>
评论