회원가입,로그인 모달

회원가입,로그인 모달

QA

회원가입,로그인 모달

답변 2

본문

회원가입이랑 로그인을 모달로 만들고 싶은데 스킨 뭐없을까요?

 

현재 모달로 회원가입을 만들어놨는데

아무래도 아이프레임으로 불러와서..

회원가입결과도 아이프레임 사이즈안에서만 구현되고 이상해서요..

아니면 회원가입작성폼에서 완료를 누르면 자동으로 모달창이 닫히게는 못할까요

 

<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을 쓰기 시작하면 그런 컨트롤이 어렵고 복잡해질 각오를 해야되는거죠 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 674
© SIRSOFT
현재 페이지 제일 처음으로