<h1>
    Dialogs
</h1>
<p>
    Dialogs are Popup controls without owner elements. They allow
    users to enter or edit information without switching to a new
    page or view. They can be modal or modeless, and are usually
    centered on the screen.
</p>
<p>
    Dialogs are displayed using the <b>show</b> method, which has
    optional arguments to define whether the dialog should be
    modal or modeless, and a callback function invoked when the
    dialog is closed.
</p>
<p>
    Dialogs are dismissed when the user presses the Escape key
    oe when the dialog loses focus. They are also dismissed when
    the user clicks an element with a class that starts with
    "wj-hide" (e.g. "wj-hide", "wj-hide-ok", or "wj-hide-cancel").
    In the latter case, the class name is assigned to the dialog's
    <b>dialogResult</b> property, and can be used by the callback
    function or by the <b>hidden</b> event handler to decide how
    to process the dialog's content.
</p>
<p>
    This demo demonstrates this by defining three dialogs that
    simulate a user authorization UI. Notice how the dialogs provide
    HTML5-style validation and the ability to invoke a dialog from
    another (you can invoke the create account dialog from within
    the log-in dialog):
</p>

<button id="btnLogin" class="btn btn-primary">
    Log In
</button>

<button id="btnCreateAccount" class="btn btn-primary">
    Create Account
</button>

<button id="btnEditAccount" class="btn btn-primary">
    Edit Account
</button>

<!-- Log In form -->
<form id="frmLogin">
    <h4 class="modal-header">
        Log in
        <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
        <label>
            Email:
            <input class="form-control" required type="email" />
        </label>
        <label>
            Password:
            <input class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." />
        </label>
        <label>
            Remember Me
            <input type="checkbox" />
        </label>
        <a href="" class="wj-hide-create">Don't have an account yet?</a>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">
            Log in
        </button>
    </div>
</form>

<!-- Create Account form -->
<form id="frmCreateAccount">
    <h4 class="modal-header">
        Create Account
        <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
        <label>
            Name:
            <input id="name" class="form-control" required pattern=".{2,}" title="Please enter 2 characters or more." />
        </label>
        <label>
            Email:
            <input id="email" class="form-control" type="email" required />
        </label>
        <label>
            Password:
            <input id="password" class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." />
        </label>
        <label>
            Confirm Password:
            <input id="confirm" class="form-control" type="password" />
        </label>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">
            Create Account
        </button>
    </div>
</form>

<!-- Edit Account form -->
<form id="frmEditAccount">
    <h4 class="modal-header">
        Edit Account
        <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
        <label>
            Email:
            <input id="email" class="form-control" required type="email" />
        </label>
        <label>
            Current Password:
            <input id="password" class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." />
        </label>
        <label>
            New Name:
            <input id="newName" class="form-control" required pattern=".{2,}" title="Please enter 2 characters or more." />
        </label>
        <label>
            New Password:
            <input id="newPassword" class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." />
        </label>
        <label>
            Confirm New Password:
            <input id="newConfirm" class="form-control" type="password" />
        </label>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">
            Update Account
        </button>
    </div>
</form>

@Html.C1().Popup("#frmLogin")
@Html.C1().Popup("#frmCreateAccount")
@Html.C1().Popup("#frmEditAccount")