Popup Overview
The Kendo UI Popup positions content next to a specific anchor.
The Popup is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the Popup
To initialize the Popup, use a <div>
element. Initially, the element is hidden as the content of the widget is designed to be only visible when opened through the API.
The following example demonstrates how to initialize the Popup and what its basic usage is.
<input id="name" /><button> Open/Close </button>
<div id="popup">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script>
$("#popup").kendoPopup({
anchor: $("#name")
});
$("button").click(function(){
$("#popup").data("kendoPopup").toggle();
});
</script>
Functionality and Features
The Popup provides options for aligning and appending it to elements and positioning it to specific points.
Events
The Popup exposes the activate
, open
, close
, and deactivate
events. For more information, refer to the JavaScript API reference of the Popup.
Referencing Existing Instances
To access an existing Popup instance, use the .data("kendoPopup")
jQuery method that is executed by the jQuery object of the originating element. For more information, refer to the article getting a reference to a Kendo UI widget. Once a reference is established, use the Popup API to control its behavior.