ModalView Overview
Starting with the R2 2023 release, Kendo UI will no longer ship Hybrid UI components. This means that the R2 2023 will be the last release to include Kendo Hybrid in the Kendo UI package. See full announcement in Kendo jQuery blog post. The last stable version that we recommend to use for Kendo Hybrid components is R3 2022 SP1.
The Hybrid UI ModalView widget is used to present a self-contained functionality in the context of the current task.
Important
As of Kendo UI Q3 2013 release, the ModalView supports autosizing when its content changes and when no height is set. Unfortunately, this was not implemented at the expense of the possibility to set the ModalView size in a CSS stylesheet. As a workaround, use the ModalView width and height options or set them through inline CSS instead.
Getting Started
The Kendo UI mobile Application automatically initializes a mobile ModalView component for every div element with the role data attribute set to modalview and present in the mobile application DOM element—same level as the application views. The ModalView element may contain optional header and footer. A mobile scroller is automatically initialized around the contents of the element.
The example below demonstrates a ModalView with a header and a footer.
<div data-role="view">
<a href="#foo" data-rel="modalview" data-role="button">Foo</a>
</div>
<div data-role="modalview" id="foo">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title">Hello World!</span>
<a data-align="right" data-role="button">Close</a>
</div>
</div>
<ul data-role="listview">
<li>Foo</li>
</ul>
<div data-role="footer">
<div data-role="navbar">
<a data-align="right" data-role="button">Details</a>
</div>
</div>
</div>
Actions with ModalViews
The widget can be opened when any mobile navigational widget, such as the ListView, Button, TabStrip, etc., is tapped. To do so, the navigational widget should have the data-rel="modalview" and href attributes pointing to the element id set of the ModalView, prefixed with #, like an anchor.
Open ModalViews
The example below demonstrates how to create a button that opens a ModalView.
<div data-role="view">
<a href="#foo" data-rel="modalview" data-role="button">Foo</a>
</div>
<div data-role="modalview" id="foo">
...
</div>
Close ModalViews
The example below demonstrates how to create a button that closes a ModalView.
<div data-role="view">
<a href="#foo" data-rel="modalview" data-role="button">Foo</a>
</div>
<div data-role="modalview" id="foo">
<div data-role="header">
<div data-role="navbar">
<a data-align="right" data-click="closeModalView" data-role="button">Close</a>
</div>
</div>
Foo
</div>
<script>
function closeModalView(e) {
// find the closest modal view, relative to the button element.
var modalView = e.sender.element.closest("[data-role=modalview]").data("kendoMobileModalView");
modalView.close();
}
</script>