Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Sun, 12 Feb 2017 03:36:45 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    	<style>
    	
          form {
            max-width: 500px;
            margin: 10px auto;
            padding: 10px 10px;
            background: #fff;
            color: #071b51;
            border: 1px #071b51;
            border-radius: 8px;
          }
    	   
         .loginpopup:hover {
           background-color: #071b51;
           color: #fff;
        	  }
        
         /*hover on span*/
        .popuptext:hover {
           pointer-events: auto;
          }
          
          
        .show {
            visibility: visible;
        }
        
        .loginpopup {
              position: relative;
            display: inline-block;
            cursor:pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        	padding: 19px 39px 18px 39px;
          background-color: #071b51;
          font-size: 18px;
          text-align: center;
          font-style: normal;
          border-radius: 10px;
          border: 1px solid #072583;
          border-width: 1px 1px 3px;
          border-color: #fff;
          box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
          margin-bottom: 10px;
          color:#fff;
           
         }
        
         .popuptext {
            visibility:hidden;
         	width: 400px;
            background-color: #fff;
            color: #071b51;
            text-align: center;
            border-radius: 6px;
            padding: 10px 10px;
            position: absolute;
            z-index: 1;
            bottom: -1000%;
            left: 0%;
            margin-left: -500px;
          }
        	</style>
	
</head>
  <body>
  
  <div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>

  	   <span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">
	  
	    	 <form>
	  		 	   <h1>Login</h1>
        
        		   				 <fieldset>
          
                                  <label for="mail">Email:</label>
                                  <input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">
                                  
                                  <label for="password">Password:</label>
                                  <input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
                                </fieldset>
                <button type="submit">Login</button>

			</form>
	   </span>




 <!--JS for all actions on main page-->
  <script>	
  //open myPopup	 
	function openPopup() {
			 var popup1 = document.getElementById("myPopup");
    		 popup1.classList.toggle("show");
	} 
	
	</script>	


  </body>
</html>

有人可以帮我解决这个问题吗？最初，“myPopup”的visibility属性设置为“hidden”。稍后，当单击“loginbutton”（onclick（））时，将调用函数“openPopup（）”，通过类“show”将“myPopup”的可见性属性设置为“visible”。但是，“myPopup”仍然隐藏。有什么我忽略的吗？感谢

Answer 1

您的javascript正确地将show课程添加到#myPopup。但是，这并没有改变它的显示方式，因为：

.popuptext稍后在CSS中定义，而不是.show，具有相同的特异性（1级）会有效地覆盖它。
.popuptext有一个bottom:-1000%（很多），还有-500px的左边距，这使得它在屏幕外呈现。

我删除了有问题的规则，并将.show放在.popuptext下CSS。

function openPopup() {
  var popup1 = document.getElementById("myPopup");
  popup1.classList.toggle("show");
}

form {
  max-width: 500px;
  margin: 10px auto;
  padding: 10px 10px;
  background: #fff;
  color: #071b51;
  border: 1px #071b51;
  border-radius: 8px;
}

.loginpopup:hover {
  background-color: #071b51;
  color: #fff;
}

/*hover on span*/
.popuptext:hover {
  pointer-events: auto;
}

.loginpopup {
  position: relative;
  display: inline-block;
  cursor:pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 19px 39px 18px 39px;
  background-color: #071b51;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  border-radius: 10px;
  border: 1px solid #072583;
  border-width: 1px 1px 3px;
  border-color: #fff;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
  margin-bottom: 10px;
  color:#fff;

}

.popuptext {
  visibility:hidden;
  width: 400px;
  background-color: #fff;
  color: #071b51;
  text-align: center;
  border-radius: 6px;
  padding: 10px 10px;
  position: absolute;
  z-index: 1;
  left: 0%;
}
.show {
  visibility: visible;
}

<div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>

<span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">

  <form>
    <h1>Login</h1>

    <fieldset>

      <label for="mail">Email:</label>
      <input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">

      <label for="password">Password:</label>
      <input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
    </fieldset>
    <button type="submit">Login</button>

  </form>
</span>

Answer 2

您的元素位于页面的方式。

从bottom:1000%移除margin-left:-500px和.popuptext，它会正常工作。

Answer 3

问题在于你的定位。您的代码实际上正在按预期工作，但弹出窗口正在被推离页面。试试这个css：

 .popuptext {
    visibility:hidden;
    width: 400px;
    background-color: #fff;
    color: #071b51;
    text-align: center;
    border-radius: 6px;
    padding: 10px 10px;
    position: absolute;
    z-index: 1;
    /*bottom: -1000%;*/
    /*margin-left: -500px;*/
    left: 0%;
  }

Answer 4

Chrome Dev Tools检查器中的快速检查会在您点击“登录”后显示此内容：

正确添加了类，但是＆＃34;可见性＆＃34;物业在＆＃39;显示＆＃39; class被＆＃34; visibility＆＃34;覆盖属于＆＃39; popuptext＆＃39;类。这是因为＆＃39; popuptext＆＃39;定义后显示＆＃39;样式标记内的类，两个类具有相同的权重（或CSS术语中的特异性）。

更正1 ：放置＆＃39; popuptext＆＃39;课程之前＆＃39; show＆＃39;类。这将覆盖＆＃34;可见性＆＃34;你想要的财产。

弹出窗口仍然无法在UI上显示。这是因为在＆＃34; popuptext＆＃34;中为margin-left属性设置了巨大的负余量。类。此外，底部属性具有非常高的价值。这会将弹出窗口放在页面底部的下方。

更正2 ：同时调整左边距和下边距属性。

HTML弹出窗口未显示

4 个答案: