Question

我已经创建了一个铃声通知图标，点击一个模态窗口打开。我想通过CSS淡入淡出模态窗口。我已经完成了编码，但模态窗口没有消失但是它正确地淡出。这是我的代码..

＆＃13;

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);
}

＆＃13;

#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';
}

＆＃13;

<div id="bellNotification" onclick="showModal();">Bell-icon
  <div id="subscribeTooltip"><div id="triangleUp"></div>Subscribe&nbsp;for&nbsp;our&nbsp;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>

＆＃13;

问题出在哪里？我无法找到。此外，您还会看到模态窗口无法正常运行。点击任意位置都会消失模态窗口。但是我以后会做的。首先，我想知道为什么它不会消失？

Answer 1

尝试使用CSS动画而不是属性转换。请参阅：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Answer 2

我已经找到了解决方案而没有改变任何CSS ..

function showModal() {
  document.getElementsByClassName('modalOverlay')[0].style.display = "block";
  setTimeout(function() {
    document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
  }, 17);
}

我不知道为什么这个工作而不是早期工作。但是我认为浏览器需要一些时间（以毫秒为单位）来显示display：block。在完成内容渲染之前，fadeIn动画已经启动。这可能会干扰动画并禁用它。我不知道我是对还是错？

延迟将不透明度设置为“1”几行的行现在正在工作。

现在运行下面的更新代码，看看它是否有效 -

function showModal() {
  document.getElementsByClassName('modalOverlay')[0].style.display = "block";
  setTimeout(function() {
    document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
  }, 17);
}

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;
  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;
  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;
}

<div id="bellNotification" onclick="showModal();">Bell-icon
  <div id="subscribeTooltip">
    <div id="triangleUp"></div>Subscribe&nbsp;for&nbsp;our&nbsp;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>

无法在我的模态窗口中应用效果

2 个答案: