<script type="text/javascript">
$J('document').ready(function(){
$J("#btnLogin").mouseover(function(){
$J(".loginbox").show();
});
$J(".loginbox").mouseleave(function(){
$J(".loginbox").hide();
});
//검은 막 띄우기
$('.openMask').click(function(e){
e.preventDefault();
wrapWindowByMask();
});
//닫기 버튼을 눌렀을 때
$('.window .close').click(function (e) {
//링크 기본동작은 작동하지 않도록 한다.
e.preventDefault();
$('#mask, .window').hide();
});
//검은 막을 눌렀을 때
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
function wrapWindowByMask(){
//화면의 높이와 너비를 구한다.
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
$('#mask').css({'width':maskWidth,'height':maskHeight});
//애니메이션 효과 - 0.3초동안 까맣게 됐다가 80% 불투명도로 간다.
$('#mask').fadeIn(300);
$('#mask').fadeTo("slow",0.8);
//윈도우 같은 거 띄운다.
$('.window').show();
}
function logoutMain() {
var f = document.logoutForm;
f.action = "/hrd/Login.do?cmd=logout";
f.submit();
}
/*login PopUp*/
function loginPop(){
var frm = document.loginFrm;
frm.action = "/hrd/Login.do?cmd=loginProcess";
frm.submit();
}
</script>
<style>
#mask{
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#CACACA;
display:none;
}
.window{
display: none;
position:absolute;
left:100px;
top:100px;
z-index:10000;
}
</style>
</head>
<body>
<form name="loginForm" method="post" action="#network">
<input type="hidden" name="sysType" value="hrdSvc" />
</form>
<form name="logoutForm" method="post" action="#network">
<input type="hidden" name="sysType" value="hrdSvc" />
</form>
<div id="wrap">
<hr />
<!--상단-->
<div id="header">
<ul class="gnb">
<c:choose>
<c:when test="${!sessionLogined}">
<li class="nobg"><a href="#" class="openMask">로그인</a></li>
<li><a href="#">회원가입</a></li>
</c:when>
<c:otherwise>
<li class="nobg"><a href="#" id="btnLogin" ><c:out value="${hname}"/>님</a></li>
<!--상단 회원정보레이어-->
<ul class="loginbox" style="display:none">
<li><a href="#">회원정보</a></li>
<li><a href="#" onclick="logoutMain()">로그아웃</a></li>
</ul>
<!--//상단 회원정보레이어-->
</c:otherwise>
</c:choose>
<li><a href="#">공지사항</a></li>
</ul>
</div>
<!--//상단-->
<br/>
<!-- 로그인 팝업 -->
<form id="loginFrm" name="loginFrm" method="post" onsubmit="return false;" action="#">
<input type="hidden" name="sysType" id="sysType" value="hrdSvc"></input>
<div id="mask"> </div>
<div class="window">
<input type="text" name="loginid" id="loginid"></input></br>
<input type="text" name="passwd" id="passwd"></input></br>
<input type="button" class="btnLogin" id="btnLogin" value="로그인" onclick="javascript:loginPop();"></input>
<input type="button" class="close" value="닫기 버튼"/>
</div>
</form>
<div id="msg"></div>
<!-- 로그인 팝업 -->
</div>
</body>
</html>
'개발 > JQuery' 카테고리의 다른 글
| 비밀번호에 글쓰기 (0) | 2018.02.13 |
|---|---|
| 뒤로가기 (0) | 2018.02.13 |
| radio 값 가져오기, 설정하기 (0) | 2018.02.13 |
| $(document).ready 와 $(window).load (0) | 2018.02.13 |
| mouse over (0) | 2018.02.13 |