Set the Popup Animation

You can easily customize the animation used when the wijpopup widget is displayed. Complete the following steps:

Create an ASP.NET MVC 5 Wijmo 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>Show Duration</label>
        <select name="showDuration" id="showDuration" class="duration">
            <option value="200">200</option>
            <option value="400">400</option>
            <option value="800">800</option>
            <option value="1200">1200</option>
            <option value="1500">1500</option>
        </select>
    </div>
    <div class="option-row">
        <label>Show Effect</label>
        <select name="showEffect" id="showEffect" class="effect">
            <option value="show">None</option>
            <option value="blind">Blind</option>
            <option value="clip">Clip</option>
            <option value="drop">Drop</option>
            <option value="fade">Fade</option>
            <option value="fold">Fold</option>
            <option value="puff">Puff</option>
            <option value="pulsate">Pulsate</option>
            <option value="slide">Slide</option>
        </select>
    </div>
    <div class="option-row">
        <label>Hide Duration</label>
        <select name="hideDuration" id="hideDuration" class="duration">
            <option value="200">200</option>
            <option value="400">400</option>
            <option value="800">800</option>
            <option value="1200">1200</option>
            <option value="1500">1500</option>
        </select>
    </div>
    <div class="option-row">
        <label>Hide Effect</label>
        <select name="hideEffect" id="hideEffect" class="effect">
            <option value="hide">None</option>
            <option value="blind">Blind</option>
            <option value="clip">Clip</option>
            <option value="drop">Drop</option>
            <option value="fade">Fade</option>
            <option value="fold">Fold</option>
            <option value="puff">Puff</option>
            <option value="pulsate">Pulsate</option>
            <option value="slide">Slide</option>
        </select>
    </div>
</div>

This markup will add several drop-down boxes that will let you select the animation used by the popup when it appears 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,
            position: {
                of: $('#Button1'),
                offset: '0 4'
            }
                          });
        $(".duration").bind("change keyup", function () {
            var o = {};
            o[$(this).attr('name')] = $(this).val() * 1;
            $("#food").wijpopup(o);
        });
        $(".effect").bind("change keyup", function () {
            var o = {};
            o[$(this).attr('name')] = $(this).val();
            $("#food").wijpopup(o);
        });
    });
    function popupbeside() {
        $("#food").wijpopup('show');
    }
</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.