Set the Popup Location

You can easily customize where and how the wijpopup widget is displayed. Complete the following steps:

Create an C1 ASP.NET MVC 5 Web Application.
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div id="food">
    <img src="http://lorempixel.com/400/200/food/1/" alt="Popup Food!" />
</div>
<div>
    <input type="button" id="Button1" onclick="popupbeside();" value="popup" />
</div>

This markup will add an image and button to the page. When the button is clicked, the image will appear.

After the closing </div> tag you added in the previous step, add the following markup:

<div class="options">
    <div class="option-row">
        <label>My</label>
        <select id="my_horizontal">
            <option value="left">left</option>
            <option value="center">center</option>
            <option value="right">right</option>
        </select>
        <select id="my_vertical">
            <option value="top">top</option>
            <option value="middle">center</option>
            <option value="bottom">bottom</option>
        </select>
    </div>
    <div class="option-row">
        <label>At</label>
        <select id="at_horizontal">
            <option value="left">left</option>
            <option value="center">center</option>
            <option value="right">right</option>
        </select>
        <select id="at_vertical">
            <option value="top">top</option>
            <option value="middle">center</option>
            <option value="bottom">bottom</option>
        </select>
    </div>
    <div class="option-row">
        <label>Offset</label>
        <input id="offset" type="text" size="15" value="0 0" />
    </div>
    <div class="option-row">
        <label>Collision</label>
        <select id="collision_horizontal">
            <option value="flip">flip</option>
            <option value="fit">fit</option>
            <option value="none">none</option>
        </select>
        <select id="collision_vertical">
            <option value="flip">flip</option>
            <option value="fit">fit</option>
            <option value="none">none</option>
        </select>
    </div>
</div>

This markup will add several drop-down boxes that will let you select the location that the image should popup at run time.

After the closing </div> tag you added in the previous step, add the following jQuery script to initialize the wijpopup widget:

<script type="text/javascript">
    $(function () {
        $("#food").wijpopup({
        autoHide: true,
        showEffect: 'blind',
        hideEffect: 'blind'
        });
    });
    function popupbeside() {
        $("#food").wijpopup('show', {
            of: $('#Button1'),
            my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
            at: $('#at_horizontal').val() + ' ' + $('#at_vertical').val(),
            offset: $('#offset').val(),
            collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val()
        });
    }
</script>

This will initialize the popup and the drop-down boxes.

What You've Accomplished

Press F5 to run the application, select options from the drop-down boxes to customize the display of the popup, and click the popup button to pop up an image.