Question

I am using the following jquery code to open a modal popup on click on an Action in MVC 3.

Action

@Html.ActionLink("Change", "Settings", "Account", null, new { @class = "openDialog", data_dialog_id = "newPostDialog", data_dialog_title = "Change" })

Jquery

     $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();

            $("<div></div>")
                .addClass("dialog")
                .attr("id", $(this)
                .attr("data-dialog-id"))
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).remove() },
                    modal: true,
                    width:1020

                })
                .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });

Problem

I am not able to position my modal popup in the center of the screen or align it with the top of the screen.

I have tried this, but doesnt work.

dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove() },
            modal: true,
            width:1020,
            top:0,
            left:10


        })

Being a naive in jquery I am unable to find a solution to this. Can anyone please guide me in geting this.

A default style of style=display: block; z-index: 1002; outline: 0px none; position: absolute; height: auto; width: 1020px; top: 394px; left: 439px; is added automaically, I just want to change top

Answer 1

strangely adding a height value did the trick, here is what I have used

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("<div></div>")
            .addClass("dialog")
            .attr("id", $(this)
            .attr("data-dialog-id"))
            .appendTo("body")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                close: function () { $(this).remove() },
                modal: true,
                height:860,
                width:900,
                left:0

            })
            .load(this.href);
    });