회원가입,로그인 모달
본문
회원가입이랑 로그인을 모달로 만들고 싶은데 스킨 뭐없을까요?
현재 모달로 회원가입을 만들어놨는데
아무래도 아이프레임으로 불러와서..
회원가입결과도 아이프레임 사이즈안에서만 구현되고 이상해서요..
아니면 회원가입작성폼에서 완료를 누르면 자동으로 모달창이 닫히게는 못할까요
<div class="setDiv more_benefit">
<a href="#" class="showMask"><img src="/thema/Basic/img/man.png"> 회원가입 </a>
<div class="mask"></div>
<div class="window">
<div style="position:relative">
<input type="button" href="#" class="close" value="x"/>
<div class="benefit1">
<iframe style="width:350px; height:1000px; " src="/bbs/register_form.php"</iframe>
</div>
</div>
</div>
<script type="text/javascript">
function wrapWindowByMask(){
// 화면의 높이와 너비를 변수로 만듭니다.
var maskHeight = $(document).height();
var maskWidth = $(window).width();
// 마스크의 높이와 너비를 화면의 높이와 너비 변수로 설정합니다.
$('.mask').css({'width':maskWidth,'height':maskHeight});
// fade 애니메이션 : 1초 동안 검게 됐다가 80%의 불투명으로 변합니다.
$('.mask').fadeIn(500);
$('.mask').fadeTo("slow",0.6);
// 레이어 팝업을 가운데로 띄우기 위해 화면의 높이와 너비의 가운데 값과 스크롤 값을 더하여 변수로 만듭니다.
var left = ( $(window).scrollLeft() + ( $(window).width() - $('.window').width()) / 2 );
var top = ( $(window).scrollTop() + ( $(window).height() - $('.window').height()) / 2 );
// css 스타일을 변경합니다.
$('.window').css({'left':left,'top':top, 'position':'absolute'});
// 레이어 팝업을 띄웁니다.
$('.window').show();
}
$(document).ready(function(){
// showMask를 클릭시 작동하며 검은 마스크 배경과 레이어 팝업을 띄웁니다.
$('.showMask').click(function(e){
// preventDefault는 href의 링크 기본 행동을 막는 기능입니다.
e.preventDefault();
wrapWindowByMask();
});
// 닫기(close)를 눌렀을 때 작동합니다.
$('.window .close').click(function (e) {
e.preventDefault();
$('.mask, .window').hide();
});
// 뒤 검은 마스크를 클릭시에도 모두 제거하도록 처리합니다.
$('.mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
답변 2
iframe으로 하시려면
parent 쪽에 창을 닫는 javascript function을 하나 만들어두고
해당 frame이 닫히기전에 parent 함수를 호출하는 방식으로 처리할 수는 있습니다만
구조도 복잡하고 테스트도 어렵고 잘 하지 않는 방법입니다.
애초에 iframe을 쓰기 시작하면 그런 컨트롤이 어렵고 복잡해질 각오를 해야되는거죠