在选择之前显示弹出窗口
在选择之前显示弹出窗口
提问于 2019-03-29 06:43:33
我已经创建了一个弹出窗口，它在页面加载时可见，但它应该隐藏，直到用户选择菜单项。弹出内容位于html代码中。如何保持popup div隐藏，直到出现popup-open调用提示？我猜这是一个相对容易的修复，但我仍在学习...
$(function() {
//----- OPEN
$('[data-popup-open]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});.popup {
display: block;
position: fixed;
left: 20%;
right: 20%;
top: 20%;
bottom: 20%;
}
.popup-inner {
max-width:60%;
max-height:60%;
/* padding:40px; */
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
font-size: 4vh;
background: rgba(0, 0, 0, 0.8);
border: 3px solid orange;
border-radius: 10px;
border-color: orange;
overflow: visible;
visibility: hidden;
}
/* Close Button */
.popup-close {
height:4vh;
width:4vh;
background-image: url("../images/close.png");
background-repeat: no-repeat;
background-image: contain;
/* background-size: 4vh;*/
object-fit: auto;
overflow:visible;
/* padding-top:4px; */
display:inline-block;
position:absolute;
top:0px;
right:0px;
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>auto</td>
<td>this is a description.</td>
<td>07/05/2016</td>
</tr>
<tr>
<td>make</td>
<td>this is a description.</td>
<td>07/12/2016</td>
</tr>
<tr>
<td>model</td>
<td>this is a description.</td>
<td>07/19/2016</td>
</tr>
</table>
</p>
<a class="popup-close" data-popup-close="popup-1" href="#"></a>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2019-03-29 08:20:23
已从.popup-inner中删除visibility: hidden
添加了.show类
默认.popup为display: none;
在Open和Close上添加了click事件侦听器和过滤器。
备注：
为代码片段演示添加了打开链接。
在close链接中添加了一些文本，以便在代码演示中更容易看到。
document.addEventListener('click', (e) => {
if(e.target.matches('.pop-open')) {
document.querySelector('.popup').classList.add('show');
}
if(e.target.matches('.popup-close')) {
document.querySelector('.popup').classList.remove('show');
}
});.popup {
position: fixed;
left: 20%;
right: 20%;
top: 20%;
bottom: 20%;
display:none;
}
.popup-inner {
max-width: 60%;
max-height: 60%;
/* padding:40px; */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
border-radius: 3px;
color: orange;
font-size: 4vh;
background: rgba(0, 0, 0, 0.8);
border: 3px solid orange;
border-radius: 10px;
border-color: orange;
overflow: visible;
}
/* Close Button */
.popup-close {
height: 4vh;
width: 4vh;
background-image: url("../images/close.png");
background-repeat: no-repeat;
background-image: contain;
/* background-size: 4vh;*/
object-fit: auto;
overflow: visible;
/* padding-top:4px; */
display: inline-block;
position: absolute;
top: 0px;
right: 0px;
transition: ease 0.25s all;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
border-radius: 1000px;
cursor: pointer;
}
.show {
display: block;
}<a href="#" class="pop-open">Open</a>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>auto</td>
<td>this is a description.</td>
<td>07/05/2016</td>
</tr>
<tr>
<td>make</td>
<td>this is a description.</td>
<td>07/12/2016</td>
</tr>
<tr>
<td>model</td>
<td>this is a description.</td>
<td>07/19/2016</td>
</tr>
</table>
</p>
<a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55407930
复制相关文章
相似问题