<h1>
    CSS Transitions
</h1>
<p>
    The Popup control's <b>fadeIn</b> and <b>fadeOut</b> properties
    add simple animations when the <b>Popup</b> is shown or hidden.
</p>
<p>
    You can create your own custom CSS-based animations by adding and
    removing classes to the Popup's host element in response to the
    <b>shown</b> and <b>hiding</b> events, and defining CSS rules
    that apply animations based on those classes.
</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")