Popups

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.

For example, click the buttons below to see a drop-down or a dialog:

// This file locates: "Scripts/Lesson/C1Input/PopupsDialogs.js".
c1.documentReady(function () {
    // show dropDown when the user clicks the button
    // note that no event handler is needed here: setting the
    // Popup's owner is enough
    var dropDown = wijmo.Control.getControl('#dropDown');
    dropDown.owner = document.getElementById('btnDropDown');
 
    // show dialog when the user clicks the button
    // here there's no owner element, so we do need an event handler
    var dialog = wijmo.Control.getControl('#dialog');
    document.getElementById('btnDialog').addEventListener('click', function (e) {
        // show the dialog (modal window)
        dialog.show(true, function (sender) {
 
            // handle result when user closes the dialog
            if (dialog.dialogResult == 'wj-hide-ok') {
                alert('The dialog was submitted.');
            } else {
                alert('The dialog was canceled.');
            }
        });
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: PopupsDialogs
        public ActionResult PopupsDialogs()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.PopupsDialogs_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.PopupsDialogs_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.PopupsDialogs_Text2)
</p>
 
<button id="btnDropDown" class="btn btn-primary">
    Show Drop-Down
</button>
<div id="dropDown" class="wj-dialog-body">
    <p>@Html.Raw(Resources.C1Input.PopupsDialogs_Text3)</p>
    <p>@Html.Raw(Resources.C1Input.PopupsDialogs_Text4)</p>
    <button class="btn btn-default wj-hide">@Resources.Resource.Btn_Ok</button>
</div>
@Html.C1().Popup("#dropDown")
 
<button id="btnDialog" class="btn btn-primary">
    @Resources.Resource.Btn_ShowDialog
</button>
<div id="dialog">
    <div class="wj-dialog-header">
        @Html.Raw(Resources.C1Input.PopupsDialogs_Text5)
    </div>
    <div class="wj-dialog-body">
        <p>
            @Html.Raw(Resources.C1Input.PopupsDialogs_Text6)
        </p>
        <p>
            @Html.Raw(Resources.C1Input.PopupsDialogs_Text7)
        </p>
        <p>
            @Html.Raw(Resources.C1Input.PopupsDialogs_Text8)
        </p>
    </div>
    <div class="wj-dialog-footer">
        <button class="btn btn-default wj-hide-ok">@Resources.Resource.Btn_Ok</button>
        <button class="btn btn-default wj-hide-cancel">@Resources.Resource.Btn_Cancel</button>
    </div>
</div>
@Html.C1().Popup("#dialog")