JavaScript 팝업 정리,예제 / window.popup/ 팝업옵션

JavaScript 팝업 정리,예제 / window.popup/ 팝업옵션

프로젝트 진행시 팝업 띄우는 방법은 여러가지가 있지만

가장 간단한 팝업을 소개하고자한다

JS의 window.popup 이다.

사용 방법은 예제의 주석을 참고하며 해당 옵션을 이용하여 자유롭게 이용하면 될듯하다.

▼팝업옵션

scrollbars = yes / no - 스크롤바

resizeable = yes / no - 사이즈 변경

width = 00px; - 넒이

hegiht = 00px; - 높이

left= 00px; - 좌에서 몇 픽셀떨어뜨릴것인지

top = 00px; - 상단에서 몇픽셀 떨어뜨릴것인지

menubar= yes / no -메뉴바

toolbar = yes / no - 도구창

location= yes / no - 메뉴아이콘

fullscreen = yes/ no - 전체화면

status = yes / no - 하단상태바

directories = yes / no - 제목표시줄

▼팝업창 띄우기 예제

// 팝업창띄우기 
$("#pop_btn").click(function(){
    
     var popUrl ="POP_URL";
     var popOption = "width=650px, height=550px, resizable=no, location=no, top=300px, left=300px;"
        
        window.open(popUrl,"타이틀들어갈제목 ",popOption);    
    
    });
 

▼팝업 후 사용 후 팝업 닫기 (ajax 버전)

 
// 등록버튼 클릭
 $("#btn_id").click(function(){
    
     
     // value 가져옴
        var table_title=  $("#table_title").val();
        var table_contents =  $("#table_contents ").val();
 
    
        // 어떤 데이터를 보낼것인가?
         var regi_data= {"table_title":table_title,"table_contents":table_contents};
    
        
        $.ajax({
            url:"URL",
            type:"post",
            data:regi_data,
            
            success : function(data){
            
                alert("등록 되었음);
                //부모창 리플래쉬(ajax를 사용하였기때문)
                opener.parent.location.reload();
                //자식창 닫아주기
                window.close();
                
                
            },//success
            
            error:function(jqXHR, textStatus, errorThrown){
                alert("등록오류.");
            }//error
            
            
            
        });//ajax
            
        
    });
 
 //팝업창 닫기
 $("#close_btn").click(function(){
    
    window.close();
 
 });