Question

我有一个dialog声明，就像这样，

                    $('#login_modal').dialog({
                        autoOpen: false,
                        modal: true,
                        resizable: false,
                        fluid: true,
                        width: "35%",   // this is experimental; depends on the window size
                        height: "450",
                        show: {
                            effect: "blind",
                            duration: 500
                        },
                        hide: {
                            effect: "blind",
                            duration: 200
                        },
                        create: function(event, ui){

                            // sets transparent bg for ui-dialog
                            $('.ui-dialog').attr('style','background: red !important; border: 0px !important; max-width: 800px !important; position: absolute; top: 50%; left: 50%;');

                            // sets css for overlay wrapper
                            $(".ui-widget-overlay").attr('style','background-color: #FFFFFF !important; opacity:0.55; z-index:1; width: 100%; height: 100%; display: none;');

                            // removes modal header
                            $(this).siblings('.ui-dialog-titlebar').remove();

                            // background for .ui-widget-content
                            $('.ui-widget-content').css({'background':'transparent !important','border':'0px !important', 'width':'100% !important'});

                        },
                        open: function(){

                            // sets transparent bg for ui-dialog
                            $('.ui-dialog').css({"background":"transparent !important", "maxHeight": "400px !important"}); 

                            // applies CSS for the overlay
                            $(".ui-widget-overlay").attr('style','background-color: #FFFFFF !important; opacity:0.55; z-index:15; width: 100%; height: 100%;');

                            // bind click event so when user clicks on overlay it closes
                            $(".ui-widget-overlay").bind('click', function() {
                                $("#login_modal").dialog('close');
                            });

                            $('div.login-content').css({"height": "auto"});
                        },
                        close: function(){
                            //
                        }
                    });

我还按照我想要的方式为对话框设置了css。目前它现在位于中心。我想要发生的是，当我尝试调整窗口大小时，对话框的位置也将从左右或左右反过来调整。我如何通过css或jquery做到这一点？这就是我到目前为止所尝试过的。谢谢你们。

Answer 1

经过一天的研究，我终于找到了答案here。

事实证明，我的代码中缺少某些东西会强制每次窗口调整大小时对话框都位于中心，此代码缺失，

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

希望这有助于任何人。：）

当窗口大小改变时，自动重新调整jquery ui-dialog的位置

1 个答案: