Markup and Scripting

The HTML markup for a wijpopup widget looks like this.

Markup	Copy Code
<!-- Any items that display when the button is clicked. --> <div id="myText"> <p>This is my text.</p> </div> <!-- Button that calls the popupbelow function and shows the popup items. --> <div> <input type="button" id="showbtn" onclick="popupbelow();" value="Show Popup" /> </div>

Markup

Copy Code

<!-- Any items that display when the button is clicked. -->
<div id="myText"> 
    <p>This is my text.</p> 
</div>
 
<!-- Button that calls the popupbelow function and shows the popup items. -->
<div> 
    <input type="button" id="showbtn" onclick="popupbelow();" value="Show Popup" /> 
</div>

You can initialize the widget with the following jQuery script. For more information about setting the position of the popup, please see jQuery UI Position.

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#myText").wijpopup({ //Sets the popup items to be hidden again //when the user clicks elsewhere. autoHide:'true' }); }); //Function that is called in the button onclick event. function popupbelow() { //Shows the popup items. $("#myText").wijpopup('show', { //Sets the position to just below the button. of: $('#showbtn') }); }; </script>

Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () { 
        $("#myText").wijpopup({ 
            //Sets the popup items to be hidden again
            //when the user clicks elsewhere.
            autoHide:'true'
        }); 
    }); 
    //Function that is called in the button onclick event.
    function popupbelow() { 
        //Shows the popup items.
        $("#myText").wijpopup('show', { 
            //Sets the position to just below the button.
            of: $('#showbtn')
        }); 
    };
</script>

The markup and script featured here results in the following live widget. Click the button to see the text.

Reference

wijpopup API