CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui-dialog
UID
UID

Reputation: 4494

How to position jQuery Dialog Box "Center and Middle" of a specific <DIV>

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.

Upvotes: 0

Views: 6981

Answers (2)

Rafael Brasil
Rafael Brasil

Reputation: 232

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).

Upvotes: 1

Irvin Dominin
Irvin Dominin

Reputation: 30993

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/

Upvotes: 4

Related Questions