ユーザーがログインするためのモーダルダイアログを作成したテストページがあります。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>
私の悪い習慣を許してください。