Hola a todos, los cuadros modales son un componente bastante común en las aplicaciones móviles, así que vamos a implementar un sencillo modal utilizando Kendo UI Mobile.

Lo primero que se requiere es una sencilla vista, en la cual sólo tenemos un botón para llamar el modal:


<div id="home" data-role="view" data-title="Home">
    <a data-role="button" data-rel="modalview" href="#modalview">Show modal</a>
</div>

Lo importante del código anterior es que al vínculo que va a abrir el modal le agregamos dos atributos:

  • data-rel: Con el valor modalview para definir que se va a trabajar una vista modal.
  • href: Con el valor del id del div que será en diálogo modal.

Ahora, es momento de crear el div que será el modal, en la definición solo se debe tener en cuenta en id y que su rol debe ser modalview, en decir tendrá la propiedad data-role=”modalview”, así el código del modal es:


<div data-role="modalview" id="modalview"  style="width: 90%; height: 270px;">
    <div data-role="header">
        <div data-role="navbar">
            <span>Modal Title</span>
            <a data-click="closeBtnHandler" data-role="button" data-align="right" data-icon="arrow-e"></a>
        </div>
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>

Para el botón de cerrar el diálogo, se hace uso de la propiedad data-click que simplemente enlaza el click del botón a una función, y será en dicha función que se cerrará el diálogo:


function closeBtnHandler()
{
    $("#modalview").kendoMobileModalView("close");
}

En resumen, el HTML completo:


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="Content/kendo.mobile.all.min.css" type="text/css" rel="stylesheet">
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/kendo.mobile.min.js"></script>
    <title>Kendo UI Mobile</title>
    <style>
        .km-arrow-e:after,.km-arrow-e:before
        {
            content: "e031";
        }
    </style>
</head>
<body>
    <!--Layout-->
    <div data-role="layout" data-id="mylayout">
        <header data-role="header">
            <div data-role="navbar">
                Kendo UI Mobile - Modal View
            </div>
        </header>
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a data-icon="home" href="#home">Home</a>
            </div>
        </footer>
    </div>
    <!--End Layout-->

    <!--View Home-->
    <div id="home" data-role="view" data-title="Home">
        <a data-role="button" data-rel="modalview" href="#modalview">Show modal</a>
    </div>
    <!--End View Home-->

    <!--Modal-->
    <div data-role="modalview" id="modalview"  style="width: 90%; height: 270px;">
        <div data-role="header">
            <div data-role="navbar">
                <span>Modal Title</span>
                <a data-click="closeBtnHandler" data-role="button" data-align="right" data-icon="arrow-e"></a>
            </div>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
            sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <!--End Modal-->

    <script>
        var app = new kendo.mobile.Application(document.body,{
            layout: "mylayout",
            initial: "home"
        });

        function closeBtnHandler()
        {
            $("#modalview").kendoMobileModalView("close");
        }
    </script>
</body>
</html>

Y el resultado final:

kendouimobilemodal

Hasta la próxima, saludos!