Question

我有一个弹出窗口，其中我在纯CSS的帮助下进行了切换。现在，如果我运行“弹出窗口”并将鼠标移到窗口的最高或最低位置，则弹出窗口开始消失。我在弹出式代码中使用了0％JAVASCRIPT，但找不到代码中的原因。

专注于鼠标光标！另外，我正在寻找一种在没有js的情况下在页面加载时打开弹出窗口的方法

POPUP代码：

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target,.modalDialog:hover {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>#__spookyPopup {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #fff);
  background: -o-linear-gradient(#fff, #999);
}

.profile_container {
  height: 160px;
  width: 400px;
  background: #;
  display: inline-block;
}

.profile_div {
  height: 120px;
  width: 130px;
  margin-top: 20px;
  margin-left: 130px;
  background: #ddd;
  border: 1px solid grey;
}

.head_div {
  min-height: 12px;
  width: 100%;
}



.priv_cont {
  height: 90px;
  width: 400px;
  background: #;
  display: inline-block;
}

.priv_head {
  height: 60px;
  width: 330px;
  margin-left:30px;
  margin-top:15px;
  background: #;

  
}




.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: ;
  color: #FFF;
}

.clicker:hover{border-bottom: 2px solid red ;
}


#click_styling
{
margin-top:20px;
height: 50px;
 width: 197px;
 text-align:center;
 font-size:20px;color:#000;
 line-height:50px;
 text-decoration:none;
 cursor:default;"

}
.clicker.hidden {
  display: none;
}

.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}


.social {
  height: 160px;
  width: 400px;
  background: #ccc;
  display: inline-block;
}

.social_link {
  height: 60px;
  width: 330px;
  margin-left:30px;
  margin-top:15px;
  background: #ddd;
  border: 1px solid grey;
  
}


.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target~div a[href="#showdiv1"],
#showdiv2:target~div a[href="#showdiv2"] {
  display: none;
}

#showdiv1:target~div a[href="#hidediv1"],
#showdiv2:target~div a[href="#hidediv2"] {
  display: inline-block;
}

#showdiv1:target~div .hiddendiv.nr1,
#showdiv2:target~div .hiddendiv.nr2 {
  height: 150px;
}

<a href="#__spooky_auth_popup">Open Modal</a>

<div id="__spooky_auth_popup" class="modalDialog">
  <div id="__spookyPopup">
    <a href="#close" title="Close" class="close">X</a>



    <div class="profile_container">

      <div class="profile_div"></div>
    </div>
	
	
    <div class="head_div">
      <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#8d8686;">
        <I>Hey, please login to access your private content.</I>
      </p>
    </div>



     <div id="showdiv1"></div>
    <div id="showdiv2"></div>

    <div>
			   <a href="#showdiv1" class="clicker "  id="click_styling" tabindex="1">SOCIAL</a>
			  <a href="#hidediv1" class="clicker hidden "  id="click_styling" tabindex="1">SOCIAL</a>

			  <a href="#showdiv2" class="clicker "  id="click_styling" tabindex="2">MANUAL</a>
			  <a href="#hidediv2" class="clicker hidden "  id="click_styling" tabindex="2">MANUAL</a>

			  <div class="hiddendiv nr1">
			  
					  <div class="social">
							<div class="social_link"> 
							
									<div data-html="allow" >
												<iframe  id="iFrame1"  style="border: 0px;  display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
									</div>
											<!-- End of facebook button -->
							
							</div>
							<div class="social_link">

									<!-- Optional: Linkedin button starts here -->
									<div data-html="allow" >
										<iframe style="border: 0px;  display: inline-block" class="spoooky-auth" src="https://api.spooo.ky/auth/linkedin" border="0"></iframe>
									</div>
									<!-- End of linkedin button -->


							</div>
					</div>
			  
			  </div>
			  <div class="hiddendiv nr2">y</div>
	  
      </div>
	  
	  <div class="priv_cont">
	  
					<div class="priv_head"><p style="margin:0;padding:0;text-align:center;font-size:18px;color:#000;">
						<I>By continuing to the content you agree with the <a href="#"  style="color:#000;">cookie</a> 
						and <a href="#"  style="color:#000;">privacy</a> policies.</I> </p>
					</div>
			
	  </div>

任何想法？问题是什么？任何输入都被获取。预先感谢。

Answer 1

默认情况下，您的modalDialog对话框的不透明度为零。悬停它时，不透明度变为1。其他所有内容也都嵌套在该div中，以至于不再将div悬停时，所有内容都会消失。

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target,.modalDialog:hover {
  opacity: 1;
  pointer-events: auto;
}

如何防止弹出窗口在CSS中消失？

1 个答案: