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”仍然隐藏。有什么我忽略了吗?谢谢
答
您的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>
答
您的元素已定位方式离开页面。
删除和margin-left:-500px
从.popuptext
它会正常工作。
答
的问题是你的定位。您的代码实际上按预期工作,但弹出窗口正在被移出页面。试试这个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%;
}
答
在Chrome浏览器开发工具检查员快速检查后,显示如下:单击“登录”:
类正确添加,但“知名度” 'show'类中的属性被'popuptext'类中的“visibility”属性覆盖。这是因为'popuptext'是在样式标记内的'show'类之后定义的,并且这两个类具有相同的权重(或CSS特性)。
更正1:放置'popuptext'类BEFORE'show'类。 这将覆盖“visibility”属性,就像你想要的那样。
弹出窗口仍然不会在UI上可见。这是因为在“popuptext”类中为margin-left属性设置了巨大的负余量。此外,底层属性的价值非常高。这会将您的弹出窗口放在页面底部的下方。
更正2:调整您的边缘左侧和底部属性以及。