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: / (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.

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

• javascript
• jquery
• html
• css
• jquery-ui-dialog

Share Improve this question Follow asked Jul 2, 2014 at 21:38 UIDUID 4,4941111 gold badges4747 silver badges7676 bronze badges 1

• 1 Remove autoopen:false in fiddle and it will show up dialog box – Sami Commented Jul 2, 2014 at 21:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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/8cjk6/

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