제이쿼리 다이얼로그 팝업

제이쿼리 다이얼로그 예시

$(".popup").dialog({
autoOpen:false, //자동으로 열리지않게
position:{
    my:"center",
    at:"center",
    of:"section"
},
modal:true,
resizable:false,
dialogClass: 'no-close success-dialog',
buttons: [
    {
        text: "확인",
        type: "submit",
        class:'popup_ok',
        click: function() {
            $('#frm_order').attr('action',g5_theme_url+'/orderform.php?item_code='+item_code);
            $('#frm_order')[0].submit();
        }
    },
    {
        text: "취소",
        class: 'popup_cancel',
        click: function() {
            $(this).dialog("close");
        }
    }
]
});

$('.popup').dialog("open");

html

<div class="popup">
   서비스 요청을 하시겠습니까?
</div>

css

.ui-widget.success-dialog {font-family: Verdana,Arial,sans-serif;font-size: .8em;}
.ui-widget-content.success-dialog {background: #F9F9F9;border: 1px solid #3261f6;color: #222222;}
 
.ui-dialog.success-dialog {left: 0;outline: 0 none;padding: 0 !important;position: absolute;top: 0;}
 
.ui-dialog.success-dialog .ui-dialog-content {background: #fff!important;border: 0 none!important;overflow: auto;position: relative;padding: 0 !important;margin: 0;text-align: center;font-size: 15px;line-height: 4rem;}
.ui-dialog .ui-dialog-buttonpane {border: none !important;background: #fff!important;margin-top: 0!important;}
.ui-dialog.success-dialog .ui-widget-header {background: #3261f6;border: 0;color: #fff;font-weight: normal;}
 
.ui-dialog.success-dialog .ui-dialog-titlebar {padding: 10px;position: relative;font-size: 1em;border-radius: 0;}
 
.popup_ok {background: #3361f6 !important;border: 0!important;color: #fff!important;font-size: 13px!important;}
.popup_cancel {background: #f1364c !important;border: 0!important;color: #fff!important;font-size: 13px!important;}
 
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {display: none;}

다이얼로그 쓰는데 갑자기 서브밋이 안되는 이유는

$(셀렉터)[0].submit 방법으로 하니까 잘먹히네..

이 버그 해결 되면 딱일텐데.. 이러고 문제 해결 하자..

여기 참고자료 보면 이해가 잘된다.

참고 자료 :

https://forum.jquery.com/topic/using-jquery-dialog-to-submit-a-form-on-clicking-yes-button-and-cancel-form-submission-on-pressing-no-button

제이쿼리 다이얼로그 팝업 #

참고 자료 : #

제이쿼리 다이얼로그 팝업

참고 자료 :