Thursday, November 28, 2013

jQuery Popup Dialog

    This example shows how to prompt a pop-up with jQeury when an icon is clicked. Following is the HTML code required for this exercise. An image link is created with the id, 'hint' (, which does not link to any page). Then a div element is defined with the 'dialog' as the id. This is the dialog that would be displayed when the image icon is clicked. The dialog will have a title, 'Bank Code' and a text, 'Abbreviation of the bank name.'. Its dimensions are defined in the style attribute (height and width). Since the div should not be displayed on the html page, it has been made invisible by setting the 'display' property to 'none' in style attribute.

<a href="#" id="hint"><img src="images/information-icon.gif" align="top"> </a>

<div id="dialog" title="Bank Code" style="display:none; height: 75mm; width: 300mm;">
    <p>Abbreviation of the bank name.</p>


Binding of click event of the link (referred to by 'hint') should be done in jQuery ready function. Click event of the link is captured and the display property of the div, 'dialog' is set to 'block'. Then prompting of the dialog is done by calling '$( "#dialog" ).dialog();'.

$(function() {
     $("#hint").click(function () {
        $( "#dialog").css("display", "block");
        $( "#dialog" ).dialog();


screen shot of the prompt:


No comments:

Post a Comment