HTML弹出窗口不显示

<!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]--> 
 
    \t <style> 
 
    \t 
 
      form { 
 
      max-width: 500px; 
 
      margin: 10px auto; 
 
      padding: 10px 10px; 
 
      background: #fff; 
 
      color: #071b51; 
 
      border: 1px #071b51; 
 
      border-radius: 8px; 
 
      } 
 
    \t  
 
     .loginpopup:hover { 
 
      background-color: #071b51; 
 
      color: #fff; 
 
     \t } 
 
     
 
     /*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; 
 
     \t 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; 
 
      \t 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; 
 
      } 
 
     \t </style> 
 
\t 
 
</head> 
 
    <body> 
 
    
 
    <div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div> 
 

 
    \t <span id="myPopup" class="popuptext" style="border: solid 10px #071b51;"> 
 
\t 
 
\t  \t <form> 
 
\t \t \t \t <h1>Login</h1> 
 
     
 
     \t \t  \t \t \t \t <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> 
 

 
\t \t \t </form> 
 
\t </span> 
 

 

 

 

 
<!--JS for all actions on main page--> 
 
    <script> \t 
 
    //open myPopup \t 
 
\t function openPopup() { 
 
\t \t \t var popup1 = document.getElementById("myPopup"); 
 
    \t \t popup1.classList.toggle("show"); 
 
\t } 
 
\t 
 
\t </script> \t 
 

 

 
    </body> 
 
</html>

有人可以帮我找出这个问题与此？最初，“myPopup”的可见性属性设置为“隐藏”。稍后，当点击“登录按钮”（onclick（））时，调用函数“openPopup（）”，通过类“show”将“myPopup”的可见性属性设置为“可见”。但是，“myPopup”仍然隐藏。有什么我忽略了吗？谢谢

来源

2017-02-12 Vishal A

您的javascript正确添加show类到#myPopup。然而，这并没有改变它是如何因为任何显示：

.popuptext在CSS比.show后面定义，并且具有相同的特异性（1级），有效地覆盖它。
.popuptext有一个bottom:-1000%（这是很多），并且还有一个-500px的余裕，这使得它在屏幕之外渲染。

我除去违规规则并且还CSS放置.show下面.popuptext。

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>

来源

2017-02-12 06:42:24

您的元素已定位方式离开页面。

删除和margin-left:-500px从.popuptext它会正常工作。

来源

2017-02-12 06:40:37 Toastrackenigma

的问题是你的定位。您的代码实际上按预期工作，但弹出窗口正在被移出页面。试试这个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%; 
    }

来源

2017-02-12 06:46:40 sono123

在Chrome浏览器开发工具检查员快速检查后，显示如下：单击“登录”：

类正确添加，但“知名度” 'show'类中的属性被'popuptext'类中的“visibility”属性覆盖。这是因为'popuptext'是在样式标记内的'show'类之后定义的，并且这两个类具有相同的权重（或CSS特性）。

更正1：放置'popuptext'类BEFORE'show'类。这将覆盖“visibility”属性，就像你想要的那样。

弹出窗口仍然不会在UI上可见。这是因为在“popuptext”类中为margin-left属性设置了巨大的负余量。此外，底层属性的价值非常高。这会将您的弹出窗口放在页面底部的下方。

更正2：调整您的边缘左侧和底部属性以及。

来源

2017-02-12 07:33:13 Kaashan

HTML弹出窗口不显示

回答

相关问题