The HTML markup for a wijpopup widget looks like this.
Drop down to view markup
| 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.
Drop down to view 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.
See Also
Reference
