프리이미지
사이트 내 전체검색

모달에 z-index 변경

페이지 정보

작성일15-03-18 07:38

본문

배추빌더 게시판 팝업 z-index 수정


mw.lib/mw.skin.basic.lib.php

        <script type="text/javascript">
        $(function() {
            $("#dialog-message-$view[wr_id]").dialog({
                modal: true,
                minWidth: 600,
                minHeight: 300,
open: function (event, ui) {
$('.ui-dialog').css('z-index',10993);
$('.ui-widget-overlay').css('z-index',102);
},
                buttons: {
                    $add_script
                    "24시간 동안 창을 띄우지 않습니다.": function () {
                        set_cookie("mw_board_popup_$view[wr_id]", "1", 24, "$g4[cookie_domain]");
                        $(this).dialog("close");
                    },
                    Ok: function() {
                        $(this).dialog("close");
                    }
                }
            });

        });


</script>




xample of Setting the Z-Index and Position

Now that you know the classes for the JQuery dialog that you’ll need to set, you can do so either in CSS, or in JQuery’s CSS function in the dialog’s on open.

Let’s say, for example, that we want to increase the z-index of our dialog to 103. That means that we’ll have to style ui-dialog to a z-index of 103, and ui-widget-overlay to a z-index of 102.

Here is what the markup would be in CSS:

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
.ui-dialog{
position:absolute;
top:70px;
left:600px;
z-index:103;
}
.ui-widget-overlay{
z-index:102;
}
</style>

Here is what the code would be in your JQuery constructor:

1
2
3
4
5
6
7
8
9
10
11
12
게시물 검색