1

我有一个测试页面，我在其中创建了一个用于登录用户的模式对话框。我想使用 CSS3 转换使对话框淡入，我已经成功地做到了，但是 div 的边框在转换它的不透明度和一些内部段落似乎移动了 1px。我无法在 jsFiddle 上重新创建问题，所以这是我的源代码：

<!DOCTYPE html>
<html>
<head>
<title>Modal Testing</title>
<style type="text/css">
.popup {
    margin:auto;
    margin-left:-100px;
    left: 50%;
    top: 40%;
    z-index: -1;
    position:fixed;
    background: white;
    height:150px;
    width:200px;
    border: 2px solid grey;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
    font-family:Arial, Helvetica,sans-serif;
    font-size:11pt;
    clear: both;
    opacity:0;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

.popup a, .signup a {
    font-size:8pt;
}

.info {
    text-align: center;
}

.signup {
    margin:auto;
    margin-left:-100px;
    left: 50%;
    top: 40%;
    position:fixed;
    z-index: 10;
    background: white;
    width: 0px;
    height: 0px;
    font-family:Arial, Helvetica,sans-serif;
    font-size:11pt;
    opacity:0;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

.alignright {
    float: right;
    text-align: right;
}

.field {
    width: 80%;
}
</style>
<script>

function displayLogin() {
    closeSignup();
    openStyle("popup", "150px");
    document.getElementById("username").tabIndex = "1";
    document.getElementById("password").tabIndex = "2";
    document.getElementById("loginsubmitbutton").tabIndex = "3";
    document.getElementById("loginclose").tabIndex = "4";
    document.getElementById("signuplink").tabIndex = "5";
    document.getElementById("forgottenlink").tabIndex = "6";
}
function displaySignup() {
    closeLogin();
    openStyle("signup", "200px");
    document.getElementById("signup_username").tabIndex = "1";
    document.getElementById("signup_password").tabIndex = "2";
    document.getElementById("signup_reenter").tabIndex = "3";
    document.getElementById("signup_email").tabIndex = "4";
    document.getElementById("signupsubmitbutton").tabIndex = "5";
    document.getElementById("signupclose").tabIndex = "6";
}
function openStyle(classname, height) {
    document.getElementsByClassName(classname)[0].style.opacity = "1";
    document.getElementsByClassName(classname)[0].style.zIndex = "10";
}
function closeLogin() {
    document.getElementsByClassName("popup")[0].style.opacity = "0";
    setTimeout(function() {closeStyle("popup");
    document.getElementById("username").tabIndex = "-1";
    document.getElementById("password").tabIndex = "-1";
    document.getElementById("loginsubmitbutton").tabIndex = "-1";
    document.getElementById("loginclose").tabIndex = "-1";
    document.getElementById("signuplink").tabIndex = "-1";
    document.getElementById("forgottenlink").tabIndex = "-1";}, 500);
}
function closeSignup() {
    document.getElementsByClassName("signup")[0].style.opacity = "0";
    setTimeout(function() {closeStyle("signup");
    document.getElementById("signup_username").tabIndex = "-1";
    document.getElementById("signup_password").tabIndex = "-1";
    document.getElementById("signup_reenter").tabIndex = "-1";
    document.getElementById("signup_email").tabIndex = "-1";
    document.getElementById("signupsubmitbutton").tabIndex = "-1";
    document.getElementById("signupclose").tabIndex = "-1";}, 500);
}
function closeStyle(classname) {
    document.getElementsByClassName(classname)[0].style.zIndex = "-1";
}
function submitLogin() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    document.getElementById("username").value = "";
    document.getElementById("password").value = "";
    //submit login as POST request from XMLHTTPrequest
}
function submitSignup() {
    var username = document.getElementById("signup_username").value;
    var password = document.getElementById("signup_password").value;
    var reenter = document.getElementById("signup_reenter").value;
    var email = document.getElementById("signup_email").value;
    if (password !== reenter) {
        alert("The passwords do not match.");
        return;
    }
    //submit signup as POST request from XMLHTTPrequest
    console.log({user:username, pass:password, email:email});
}
</script>
</head>
<body>
<button onclick="displayLogin();">Show Login Screen</button><br>
<div class="popup">
    Username:<a class="alignright" href="javascript:closeLogin();" id="loginclose" tabIndex="-1">close</a><br>
    <input type="text" id="username" class="field" tabIndex="-1" onkeydown="if (event.keyCode == 13) document.getElementById('loginsubmitbutton').click()"><br>
    Password:<br>
    <input type="password" id="password" class="field" tabIndex="-1" onkeydown="if (event.keyCode == 13) document.getElementById('loginsubmitbutton').click()"><br>
    <button onclick="submitLogin();" id="loginsubmitbutton" tabIndex="-1">Login</button><br>
    <p class="info"><a href="javascript:displaySignup();" id="signuplink" tabIndex="-1" >Sign up!</a> - <a href="javascript:displayForgotten();" id="forgottenlink" tabIndex="-1">Forgot Password?</a></p>
</div>
<div class="signup">
    Username:<a class="alignright" href="javascript:closeSignup();" id="signupclose" tabIndex="-1">close</a><br>
    <input type="text" id="signup_username" class="field" tabIndex="-1" onkeydown="if (event.keyCode == 13) document.getElementById('signupsubmitbutton').click()"><br>
    Password:<br>
    <input type="password" id="signup_password" class="field" tabIndex="-1" onkeydown="if (event.keyCode == 13) document.getElementById('signupsubmitbutton').click()"><br>
    Re-enter Password:<br>
    <input type="password" id="signup_reenter" class="field" tabIndex="-1" onkeydown="if (event.keyCode == 13) document.getElementById('signupsubmitbutton').click()"><br>
    Email:<br>
    <input type="text" id="signup_email" class="field" tabIndex="-1" onkeydown="if (event.keyCode == 13) document.getElementById('signupsubmitbutton').click()"><br>
    <button onclick="submitSignup();" id="signupsubmitbutton" tabIndex="-1">Signup</button><br><br>
</div>
</body>
</html>

请原谅我的坏习惯。

4

0 回答 0