我创建了一个铃铛通知图标,点击它会打开一个模式窗口。我想通过 CSS 淡入淡出模式窗口。我已经完成了编码,但是模态窗口没有淡入,而是正确淡出。这是我的代码..
function showModal()
{
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}
function hideModal()
{
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function(){document.getElementsByClassName('modalOverlay')[0].style.display = "none"}, 300);
}
#bellNotification
{
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover
{
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip
{
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip
{
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
font-family: 'Palanquin';
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover
{
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp
{
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay
{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window
{
width: 50%;
min-height: 200px;
background-color: white;
font-family: 'Titillium';
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input
{
color: #4d4d4d;
font-family: 'Palanquin';
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip"><div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" /><input type="button" value="Proceed" />
</div>
</div>
问题出在哪里?我找不到。您还会看到模态窗口无法正常运行。单击任何地方都会消失模态窗口。但我稍后会做。首先我想知道为什么它不淡入?