jQuery 对话框未在中心显示

Question

I am having the same issue as i had in this question but now for all browsers.

Here is the code:

$('form#main').live('submit', function(e) {
        e.preventDefault();
        var $this = this;
        ////console.log('click submit')
        var $div = $('<div>', {
            html: 'Are you sure you want to submit this table?<br/> All undo information will be lost.'
        }).dialog({
            modal: true,
            title: 'Are You Sure?',
            buttons: {
                ok: function() {
                    self.console('clicked ok');
                    $.post($this.action, $($this).serialize() + '&page=' + self.pageOn, function(data) {
                        self.console(data);
                        $('.DEV-time').text("  (File last updated at: " + data.DEV + ")");
                        $('.PROD-time').text("  (File last updated at: " + data.PROD + ")");
                        if(data.ERROR.length > 0){
                            alert(data.ERROR);
                        }
                        self.pageChanged = false;
                        self.origPage = $('#page').clone();
                        self.lastClick = $('#page').clone();
                    }, 'json')
                    $(this).dialog('close');
                },
                cancel: function() {
                    $(this).dialog('close');
                }
            },
            beforeClose: function() {
                $(this).remove();
            }
        })

        $div.dialog('widget').css('margin', '0 auto');

        return false;
    })

Answer 1

In addition to 'margin', you need to give it an explicit css width.

Answer 2

I think your problem is that the.dialog() method doesn't know content height before it loads. Either try defining height in dialog definition, or try this Centering jQuery UI dialog of unknown height - is it possible?

EDIT: sorry, I didn't see it was about centering it horizontally. If so, you probably need to explicitly set the width of the dialog, or use the same trick as above in the link.

Answer 3

REMOVING the:

$div.dialog('widget').css('margin', '0 auto');

which was the fix to the last question, fixed it this time

Answer 4

have you import/include the position.js? on your code?

<script src="jquery.ui.position.js"></script>

it's work for me