0
나는이 홈페이지를 만들었습니다. 팝업창에는 로그인 필드가 있습니다. 팝업이있을 때 배경이 희미 해집니다. 그러나 사용자가 상자 경계 외부를 클릭하면 팝업이 닫혀 야합니다. 사용자가 키보드에서 "esc"를 눌렀을 때 작동하는 closeOverlay 함수를 만들었지 만 사용자가 상자의 경계를 벗어날 때 아무 일도 일어나지 않습니다. 이 사용자 히트 탈출 할 때, 두 경우 모두에서 작동하거나 상자 경계 외부에서 마우스를 취하고 클릭 그래서 나는 그것을 만들 수있는 방법마우스가 바깥 쪽 경계를 클릭하여 닫기 팝업 상자
이
<head>
<link rel="stylesheet" type="text/css" href="LAb2css.css">
</head>
<script>
window.onload = function() {
setInterval(move, 10000);
}
function move() { //makes the box move in relation to the box div
var d = document.getElementById('moveQuestion');
var boxh = document.getElementById('boxDIV').clientHeight - 100; //keeps the image in the box by subtracting height
var boxw = document.getElementById('boxDIV').clientWidth - 100; //keeps the image in the box by subtracting the width
document.onmousemove = function calc(e) {
var x = e.clientX ;
var y = e.clientY;
if (x < boxw) {
d.style.left = x +'px';
}
if (y < boxh) {
d.style.top = y +'px';
}
};
};
function signin() { //displays the sign in form
var lg = document.getElementById('login');
var ov = document.getElementById('BackDIV');
ov.style.display = 'block';
lg.style.display = 'block';
};
function join() { //calls the join form for users to register
var lg = document.getElementById('signup');
var ov = document.getElementById('BackDIV');
ov.style.display = 'block';
lg.style.display = 'block';
activeForm = 1; //sets the active form counter to 1; a form is active
};
function recoverPass() { //displays the recoverPassword form for the user to recover password
var ov = document.getElementById('BackDIV');
ov.style.display = 'block';
var rp = document.getElementById('recoverPassword');
rp.style.display = 'block';
//sets the active form counter to 1; a form is active
};
function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none
var ov = document.getElementById('BackDIV');
var rp = document.getElementById('recoverPassword');
var lg = document.getElementById('login');
var sg = document.getElementById('signup');
ov.style.display = 'none';
rp.style.display = 'none';
lg.style.display = 'none';
sg.style.display = 'none';
};
function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none
var ov = document.getElementById('BackDIV');
var rp = document.getElementById('recoverPassword');
var lg = document.getElementById('login');
var sg = document.getElementById('signup');
ov.style.display = 'none';
rp.style.display = 'none';
lg.style.display = 'none';
sg.style.display = 'none';
};
function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none
var ov = document.getElementById('BackDIV');
var rp = document.getElementById('recoverPassword');
var lg = document.getElementById('login');
var sg = document.getElementById('signup');
ov.style.display = 'none';
rp.style.display = 'none';
lg.style.display = 'none';
sg.style.display = 'none';
};
document.onkeydown = function(evt) { //makes the escape key to call the closeOverlay() function
evt = evt || window.event;
if (evt.keyCode == 27) {
closeOverlay();
}
};
</script>
<body onload = move()>
<div id="BackDIV">
</div>
<p>
<?php
// Just for displaying the display type for testing
echo 'Display type = ' . $display_type . '<br><br>';
if ($display_type == 'Start') {
echo 'StartPage<br>';
}
else if ($display_type == 'SignIn') {
echo "StartPage with 'SignIn' popup box<br>";
}
else if ($display_type == 'Join') {
echo "StartPage with 'Join' popup box<br>";
}
else if ($display_type == 'ForgotPassword') {
echo "StartPage with 'ForgotPassword' popup box<br>";
}
else {
echo 'StartPage with no popup box<br>';
}
?>
</p>
<div id = "main">
<div id = "dateDIV"><?php $t = time(); echo (date("Y-m-d H:i:s", $t)); ?></div>
<div id = "titleDIV">
<h2>Thompson Rivers University - Question/Answers</h2>
</div>
<div id ="dopDownDIV">
<ul>
<li>
<a href = "#"><img src="images/responsive_menu.png" title="MENU" alt="Menu" id="MenuIMG" height="50PX" width="50px" /></a>
<ul>
<li><a href="#" onclick = "signin()">SIGN IN</a></li>
<li><a href="#" onclick="join()">JOIN</a></li>
<li><a href="#" onclick="recoverPass()">FORGOT PASSWORD</a></li>
</ul>
</li>
</ul>
</div>
<div id="boxDIV"> <a href ="#"><img src ="images/question-mark.png" id="moveQuestion" title= "Image moving In Box" alt="ImgInbox" height = "100px" width = "100px"</a></div>
<div id= "BottomDIV">
<a href = "http://cs.tru.ca" target="_blank"> About Us </a>
</div>
</div>
<!--Div for Signup form on click -->
<div id="signup" onclick="closeOverlay()">
<form action="main.html" method="get" autocomplete="on">
<input type="text" name="username" autofocus><br /><p>Your email address</p>
<input type="password" name="password"><br /><p>Password</p>
<br /><br /><br />
<input id="formButton" type="submit" value="Join">
<a href="StartPage.html">
<input type="button" value="Cancel"/>
</a>
</form>
</div>
<!--DIv for recoverPassword -->
<div id="recoverPassword" onclick="closeOverlay()">
<!--<h1>Recover Password</h1> -->
<form action="main.html" method="get" autocomplete="on">
<input type="text" name="recoveremail" placeholder="The email address you registered with" autofocus><br /><p>Username (or email address)</p>
<input id="formButton" type="submit">
<a href="StartPage.html">
<input type="button" value="Cancel"/>
</a>
</form>
</div>
<!--Div for Login -->
<div id="login" onclick="closeOverlay()">
<form action="controller.php" method="post" autocomplete="on" >
<input type='hidden' name='command' value='SignIn'>
<input type="text" name="user" autofocus value="<?php echo $username ?>"> <?php echo $error_msg_username; ?> ><br /> <p>Username (or email address)</p>
<input type="password" name="pass" value="<?php echo $password ?>"> <?php echo $error_msg_password ?> ><br /><p>Password</p>
<br/>
<input type="submit" id="formButton" value="Sign In" >
<a href="StartPage.html">
<input type="button" value="Cancel"/>
</a>
</form>
</div>
</body>
</html>
이 질문은 jQuery를 함께 무엇을해야합니까? 당신이 그것을 사용하지 않는 것처럼 보이지 않습니다. 그리고 왜 여러 개의 closeOverlay 함수가 있습니까? 당신의 질문에 답하기 위해서 : 단지'eventListener'를'BackDIV'에 추가 할 수는 없습니까? – putvande