如何定位特定的jQuery对话框的“中间和中间” <DIV>

Question

I want to align the jQuery Dialog box Center to a DIV and not to the full window.

Here is my code:

HTML

<div id="Box1"><input id="openDialogButton" type="button" value="Open Dialog"></div>
<div id="Box2"></div>
<div id="Box3"></div>
<div id="dialogbox" title="Dialog Heading">
    <p>Test Message</p>
</div>

CSS

div {
    display:inline-block;
    height:400px;
    padding:10px;
    border:1px solid #ff0000;
    width:50%;
    vertical-align:top;
}
#Box1 {
    width:90px;
}
#Box2 {
    width:150px;
}

jQuery

$(document).ready(function () {
    $("#openDialogButton").click(function () {
        $("#dialogbox").dialog({
            width: 300,
            autoOpen: false,
            modal: false,
            position: {
                my: "center",
                at: "center",
                of: $('#Box3')
            },
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                }
            }
        });
    });
});

Here is the Fiddle: http://jsfiddle.net/Hftm3/ (for some reason my Dialog Box is not working in this fiddle. Not sure why)

Let me know if you need any other information.

Please suggest.

Answer 1

I think the issue is because the element is not visible in the viewport, in this case you can scrollTo the element then fire the dialog.

Code:

$(document).ready(function () {
    $("#openDialogButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#Box3").offset().top
        }, 1000, function () {
            $("#dialogbox").dialog({
                width: 300,
                modal: false,
                position: {
                    my: "center",
                    at: "center",
                    of: $('#Box3')
                },
                buttons: {
                    "Submit": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    });
});

Demo: http://jsfiddle.net/8cjk6/

Answer 2

In click the button event you are setting the dialog. If you set the autoOpen to true it will be shown as soon as you click the button. I've tested it here in you jsfiddle. You only have to resize it:

$(document).ready(function () {
    $("#openDialogButton").click(function () {
        $("#dialogbox").dialog({
            width: 300,
            height: 200, //try this
            autoOpen: true, //try this too
            modal: false,
            position: {
                my: "center",
                at: "center",
                of: $('#Box3')
            },
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                }
            }
        });
    });
});

Also, change you CSS to match only what you need:

#box1, #box2, #box3 {
    display:inline-block;
    height:400px;
    padding:10px;
    border:1px solid #ff0000;
    width:50%;
    vertical-align:top;
}

Using only div{ as you are using will break all your divs (including the ones generated by jquery to show your dialog).