Automatically readjust the position of jquery ui-dialog as window size changes

Question

I have a dialog declaration that goes like this,

                    $('#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(){
                            //
                        }
                    });

I have also set the css for the dialog the way I want it. Currently it is now positioned on the center. What I want to happen is that when I try to adjust the window size, the position of the dialog will also adjust, from right-left or left-right vice versa. How would I do this via css or jquery? That is what I have tried so far. Thank you guys.

Answer 1

After a day of research, I finally found my answer here.

It turns out there is something lacking on my code which forces the dialog to be positioned at center every time the window resizes, this code is lacking,

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

Hope this helps anyone. :)