Popups with Owner Elements

Popups may have owner elements that control their position and visibility.

The Popup's showTrigger and hideTrigger properties determine whether the Popups should be shown or hidden when the owner element is clicked or when the popup loses the focus.

In Bootstrap CSS, Popups with owner elements are called "Popovers".

Show on Click, Hide on Blur

The most common type of Popover is the one with showTrigger set to 'Click' and hideTrigger set to 'Blur'.

In this example, the owner element is a button. Click the button to show the Popover. Click anywhere outside the Popover to take the focus away and hide it:

Show on Click, Hide on Click

If you set the showTrigger and hideTrigger to 'Click', the Popover will appear when you click the owner element and will remain visible until you click the owner element again:

Show on Click, Hide with Code

If you set the showTrigger to 'Click' and hideTrigger to 'None', the Popover will appear when you click the owner element and will remain visible until you call the hide method in code or until the user presses the Escape key or clicks an element with the 'wj-hide' class:

// This file locates: "Scripts/Lesson/C1Input/PopupsOwners.js".
c1.documentReady(function () {
    var popClickBlur = wijmo.Control.getControl('#popClickBlur');
    popClickBlur.showTrigger = 'Click';
    popClickBlur.hideTrigger = 'Blur';
 
    var popClickClick = wijmo.Control.getControl('#popClickClick');
    popClickClick.showTrigger = 'Click';
    popClickClick.hideTrigger = 'Click';
 
    var popClickNone = wijmo.Control.getControl('#popClickNone');
    popClickNone.showTrigger = 'Click';
    popClickNone.hideTrigger = 'None';
});

// This file locates: "Content/css/Lesson/C1Input/PopupsOwners.css".
.modal-body {
  min-width: 300px;
}
 
input:invalid {
  border-color: red;
}
 
 
/* CSS animations for fading in and out */
 
.custom-animation {
  opacity: 0;
  transform: rotate3d(1, .5, .5, 180deg) scale(0.1);
  transition: all ease-in .4s;
}
 
.custom-animation-visible {
  opacity: 1;
  transform: none;
}

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

<h1>
    @Html.Raw(Resources.C1Input.PopupsOwners_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.PopupsOwners_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.PopupsOwners_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Input.PopupsOwners_Text3)
</p>
 
<h3>
    @Html.Raw(Resources.C1Input.PopupsOwners_Title1)
</h3>
<p>
    @Html.Raw(Resources.C1Input.PopupsOwners_Text4)
</p>
<p>
    @Html.Raw(Resources.C1Input.PopupsOwners_Text5)
</p>
<button id="btnClickBlur" class="btn btn-primary">
    @Html.Raw(Resources.C1Input.PopupsOwners_Text12)
</button>
<div id="popClickBlur" class="popover">
    <h3 class="popover-title">
        @Html.Raw(Resources.C1Input.PopupsOwners_Title2)
    </h3>
    <div class="popover-content">
        @Html.Raw(Resources.C1Input.PopupsOwners_Text6)
    </div>
</div>
@Html.C1().Popup("#popClickBlur").Owner("#btnClickBlur")
 
<h3>
    @Html.Raw(Resources.C1Input.PopupsOwners_Title3)
</h3>
<p>
    @Html.Raw(Resources.C1Input.PopupsOwners_Text7)
</p>
<button id="btnClickClick" class="btn btn-primary">
    @Html.Raw(Resources.C1Input.PopupsOwners_Text12)
</button>
<div id="popClickClick" class="popover">
    <h3 class="popover-title">
        @Html.Raw(Resources.C1Input.PopupsOwners_Title2)
    </h3>
    <div class="popover-content">
        @Html.Raw(Resources.C1Input.PopupsOwners_Text8)
    </div>
</div>
@Html.C1().Popup("#popClickClick").Owner("#btnClickClick")
 
<h3>
    @Html.Raw(Resources.C1Input.PopupsOwners_Title5)
</h3>
<p>
    @Html.Raw(Resources.C1Input.PopupsOwners_Text9)
</p>
<button id="btnClickNone" class="btn btn-primary">
    @Html.Raw(Resources.C1Input.PopupsOwners_Text12)
</button>
<div id="popClickNone" class="popover">
    <h3 class="popover-title">
        @Html.Raw(Resources.C1Input.PopupsOwners_Title2)
    </h3>
    <div class="popover-content">
        <form name="popoverForm">
            <p>
                @Html.Raw(Resources.C1Input.PopupsOwners_Text10)
            </p>
            <pre>2 + 3 = <span class="">5</span></pre>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">@@</div>
                    <input class="form-control" type="email" placeholder="@Resources.C1Input.PopupsOwners_Text11">
                </div>
            </div>
            <div class="form-actions">
                <button class="btn btn-danger wj-hide">@Resources.Resource.Btn_Close</button>
                <button class="btn btn-primary wj-hide-ok">@Resources.Resource.Btn_SaveChanges</button>
            </div>
        </form>
    </div>
</div>
@Html.C1().Popup("#popClickNone").Owner("#btnClickNone")