New to Kendo UI for jQuery? Download free 30-day trial

Render a Popup in the Center of the Window

Environment

Product Progress Kendo UI Window for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I show a popup in the center of the Kendo UI for jQuery Window?

Solution

The Kendo UI Window gains focus when it is opened or initialized through the visible parameter. This makes the browser scroll the page to bring the Window into view, which creates alignment issues when a popup is implemented and expected to show in the center of the browser viewport.

To avoid this behavior and to be able to properly position the popup, it is recommended that you initialize the widget with the visible: false configuration, and then call the open() and center() methods.

The example below demonstrates how to position a popup in the center of the browser viewport.

    <button>Create and open popup</button>
     <div id="windowForAssign"></div>
     <script>
       $('button').click(createAndShowPopup);
       var kendoWindowAssign = $("#windowForAssign");
       var title = "Sample title";
       var url = "http://jsonplaceholder.typicode.com/posts";

       function createAndShowPopup(){
         kendoWindowAssign.kendoWindow({
           width: "650px",
           modal: true,
           height: '120px',
           iframe: true,
           resizable: false,
           title: title,
           content: url,
           visible: false
         });

         var popup = $("#windowForAssign").data('kendoWindow');
         popup.open();
         popup.center();
       }
     </script>

See Also

In this article