[Solved] Centering a Modal Window

[Chris]

Previous to 2010.3.1110, the modal window centered itself.  This is no longer the case.  Is this a bug?  The thread, http://www.telerik.com/community/forums/aspnet-mvc/window/open-a-centered-window.aspx, seems to indicate that you now have the manually center it; i.e. instead of doing a $('name').data('tWindow').open() you have to do a $('name').data('tWindow').center().open().  At least a center modal option would be nice, if you are going to remove that functionality (if its not a bug).

Anyways, for those that are adventurous and want their modals to be centered, modify the telerik.window.js this way:

1) find the open method
2) as the last step of the if (this.modal) block, add the following:

this['center']();

Now the modals will automatically center without needing to manually do it.

[Chris]

Want to be able to toggle whether to center or change the default position of the modal when you define the window?

Step 1 -  Add the following to the Window\Fluent\WindowBuilder.cs class:

/// <summary>
/// Sets the left location of the modal window.
/// </summary>
public WindowBuilder ModalLeft(int value)
{
    Component.ModalLeft = value;

    return this;
}

/// <summary>
/// Determines the position the modal windows opens at.
/// </summary>
public WindowBuilder ModalPosition(Window.WindowPositions value)
{
    Guard.IsNotNull(value, "value");

    Component.ModalPosition = value;

    return this;
}

/// <summary>
/// Sets the top location of the modal window.
/// </summary>
public WindowBuilder ModalTop(int value)
{
    Component.ModalTop = value;

    return this;
}

Step 2 - Add the following to the Window\Window.cs class:

public int ModalLeft
{
    get;
    set;
}

public WindowPositions ModalPosition
{
    get { return _windowPosition; }
    set { _windowPosition = value; }
}

public int ModalTop
{
    get;
    set;
}

public override void WriteInitializationScript(TextWriter writer)
{
    ...
     //properties
    ...
    objectWriter.Append("modalPosition", ModalPosition.ToString());
    objectWriter.Append("modalLeft", ModalLeft);
    objectWriter.Append("modalTop", ModalTop);
    ...
}

private WindowPositions _windowPosition = WindowPositions.None;

public enum WindowPositions
{
    Bottom,
    Center,
    Custom,
    Left,
    None,
    Right,
    Top
}

Step 3 - Add the following to the Scripts\telerik.window.js script:

// Change to the open function...

open: function (e) {
...
        if (this.modal) {

...
            if (this.modalPosition == 'Custom') {
                var $window = $(window);

                $element.css({
                    left: this.modalLeft,
                    top: this.modalTop
                });
            }
            else if (this.modalPosition != 'None') {
                this[this.modalPosition.toLowerCase()]();
            }
        }

   ...
    }

...
},

// Add the following by the 'center' method...

bottom: function () {
    var $element = $(this.element);
    var $window = $(window);

    $element.css({
        left: $window.scrollLeft() + ($window.width() - $element.width()) / 2,
        top: $window.scrollTop() + ($window.height() - $element.height()) - 15
    });

    return this;
},

left: function () {
    var $element = $(this.element);
    var $window = $(window);

    $element.css({
        left: $window.scrollLeft() + 5,
        top: $window.scrollTop() + ($window.height() - $element.height()) / 2
    });

    return this;
},

right: function () {
    var $element = $(this.element);
    var $window = $(window);

    $element.css({
        left: $window.scrollLeft() + ($window.width() - $element.width()) - 15,
        top: $window.scrollTop() + ($window.height() - $element.height()) / 2
    });

    return this;
},

top: function () {
    var $element = $(this.element);
    var $window = $(window);

    $element.css({
        left: $window.scrollLeft() + ($window.width() - $element.width()) / 2,
        top: $window.scrollTop() + 5
    });

    return this;
},

// Default options...

// default options
    $.fn.tWindow.defaults = {
       ...
        modalLeft: 0,
        modalTop: 0,
       ...
    };

That should be it.  Now you can in your markup use the .ModalPosition, .ModalLeft and .ModalTop to define where you want your modal to show up instead of having to create additional javascript to do it.