jube-fork/Jube.App/wwwroot/kendo/examples/modalview/index.html

<div data-role="view" id="modalview-camera" data-title="HTML5 Camera" data-use-native-scrolling="true">
    <h1 class="app-logo">Camera<br /> Application</h1>
    <div class="action-buttons">
        <a data-role="button" class="km-justified km-primary km-large" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>
    </div>
</div>

<div data-role="modalview" id="modalview-login" style="width: 90%;">
    <div data-role="header">
        <div data-role="navbar">
            <span>Login</span>
            <a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>
        </div>
    </div>

    <ul data-role="listview" data-style="inset">
        <li><label for="username">Username: <input type="text" id="username" /></label></li>
        <li><label for="password">Password: <input type="password" id="password" /></label></li>
    </ul>
    <div data-role="footer">
        <div data-role="navbar">
            <a data-click="closeModalViewLogin" id="modalview-login-button" type="button" data-role="button" data-align="right">Login</a>
            <a data-click="closeModalViewLogin" id="modalview-reg-button" type="button" data-role="button" data-align="right">Register</a>
        </div>
    </div>
</div>

<style type="text/css" media="screen">
    h1.app-logo {
        margin: 3em 0;
        font-size: 3em;
        font-weight: 100;
        text-transform: uppercase;
        text-align: center;
        line-height: .9em;
    }
    .action-buttons {
        margin: 1em;
    }
</style>
<script>
    function closeModalViewLogin() {
        $("#modalview-login").kendoMobileModalView("close");
    }
</script>