<h1>
    Popups
</h1>
<p>
    The Popup control shows arbitrary HTML content next to an
    "owner" element or centered on the screen. It can be used
    to implement drop-downs and dialogs.
</p>
<p>
    For example, click the buttons below to see a drop-down
    or a dialog:
</p>

<button id="btnDropDown" class="btn btn-primary">
    Show Drop-Down
</button>
<div id="dropDown" class="wj-dialog-body">
    <p>This is a drop-down.</p>
    <p>It may contain other controls.</p>
    <button class="btn btn-default wj-hide">OK</button>
</div>
@Html.C1().Popup("#dropDown")

<button id="btnDialog" class="btn btn-primary">
    Show Dialog
</button>
<div id="dialog">
    <div class="wj-dialog-header">
        Dialog Header
    </div>
    <div class="wj-dialog-body">
        <p>
            This is a modal dialog.
        </p>
        <p>
            The dialog body may contain any HTML content.
        </p>
        <p>
            The dialog will close when you click the OK or Cancel buttons,
            <br /> or the grey background outside the dialog,
            <br /> or when you press the Escape key.
        </p>
    </div>
    <div class="wj-dialog-footer">
        <button class="btn btn-default wj-hide-ok">OK</button>
        <button class="btn btn-default wj-hide-cancel">Cancel</button>
    </div>
</div>
@Html.C1().Popup("#dialog")