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: '200px',
resizable: false,
title: title,
content: {
url: url,
dataType: "json"
},
});
var popup = $("#windowForAssign").data('kendoWindow');
popup.open();
popup.center();
}