The following is code to create popups. To use this code:

1. Create a div that contains the pop up content and add an id tag to the div.
2. Create a div or image that will be used to open the popup, and add a class tag.
3. Add a div or image to the popup content that may be pressed to close the popup, add a class to the div or image

Add the following JavaScript code …

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    <script type="text/javascript">
        $(function() {
            if (!$("#dr_pop_div").length )  $("body").prepend( "<div id='dr_pop_div' ></div>" ) ;
                function dr_pop(config) {
                    var dr_tag    = (config.msg) ? config.msg : "#msg" ;  /* tagged div that will pop up */
                    var dr_open   = (config.open)? config.open : ".info_open"  ;  /* element to click to open    */
                    var dr_close  = (config.close)? config.close : ".info_close"  ;  /* element to click to close   */
                    var dr_toggle = (config.toggle)? config.toggle : ".info_toggle"  ; /* element to click to toggle */

                    $("#dr_pop_div" ).append($(dr_tag));
                    $("#dr_pop_div").addClass("dr_pop_hide") ; 
                    $(dr_tag).addClass("dr_pop_hide") ;

                    $(dr_open).click(function()   {
                        if ($("#dr_pop_div").hasClass("dr_pop_hide"))   $("#dr_pop_div").removeClass("dr_pop_hide") ;
                        if ($(dr_tag).hasClass("dr_pop_hide")) 	        $(dr_tag).removeClass("dr_pop_hide") ;	
                        if (!$("#dr_pop_div").hasClass("dr_pop_show"))  $("#dr_pop_div").addClass("dr_pop_show") ;
                        if (!$(dr_tag).hasClass("dr_pop_show"))         $(dr_tag).addClass("dr_pop_show") ; 
                    }) ;
                    $(dr_close).click(function()  {
                        if ($(dr_tag).hasClass("dr_pop_show"))        $(dr_tag).removeClass("dr_pop_show") ;
                        if ($("#dr_pop_div").hasClass("dr_pop_show")) $("#dr_pop_div").removeClass("dr_pop_show") ;
				
                        if (!$(dr_tag).hasClass("dr_pop_hide"))        $(dr_tag).addClass("dr_pop_hide") ;
                        if (!$("#dr_pop_div").hasClass("dr_pop_hide")) $("#dr_pop_div").addClass("dr_pop_hide") ;
		    }) ;
                    $(dr_toggle).click(function() {
                        if ($("#dr_pop_div").hasClass("dr_pop_hide")) {
                            $("#dr_pop_div").removeClass("dr_pop_hide") ;
                            $(dr_tag).removeClass("dr_pop_hide") ;
                            if (!$("#dr_pop_div").hasClass("dr_pop_show")) { 
                                $("#dr_pop_div").addClass("dr_pop_show") ;
                                $(dr_tag).addClass("dr_pop_show") ;
                            }
                        } else {
                            if ($("#dr_pop_div").hasClass("dr_pop_show")) { 
                                $("#dr_pop_div").removeClass("dr_pop_show") ;
                                $(dr_tag).removeClass("dr_pop_show") ;
                            }
                            if (!$("#dr_pop_div").hasClass("dr_pop_hide")) {
                                $("#dr_pop_div").addClass("dr_pop_hide") ;
                                $(dr_tag).addClass("dr_pop_hide") ;
                            }
                        }		    
                    }) ;
                }
                var popup1 = new dr_pop({ "msg" : "#msg", "open" : ".info_open", "close" : ".info_close"  }) ; 
                /* ... more popup declarations go here */
            }) ;		  
	</script>

For each message popup, declare the popup by defining the labels that will be used for the popups. The definitions of the labels are done in the “dr_pop” statement. The dr_pop(config) is defined as follows:

    var pop = new dr_pop( {
       "msg" :  ,     
       "open" :  ,
       "close" : 
      }) ;
  Where:
      is the quoted id for the div that holds the message, example: "#msg"
      is the quoted id or class of the object to use as the open button. 
                (Example:  .info_open) 
      is the quoted id or class of the object to use as the close button.
                (example: .info_close)