Show and Hide the popup using jQuery stopPropagation

Here is the jQuery popup HTML and jQuery code. It will use to show the popup upon clicking the span tag and close the popup while clicking the close mark or outside of the popup.

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#travelerCount > span").click(function (e) {
        jQuery("#travelerDesc").show();
        e.stopPropagation();
    });
	jQuery("#travelerDesc").click(function (e) {
        e.stopPropagation(); 
    });
	jQuery(document).click(function (e) {
        jQuery("#travelerDesc").hide();
    });
	jQuery('#travelerDesc .close').click(function (e) {
        jQuery("#travelerDesc").hide();
    });
});
</script>
<div id="travelerCount"> 
<span>Click here to see the popup</span>
  <div id="travelerDesc" style="display:none;"> 
  	<a class="close">×</a> 
 	Content goes here.... 
  </div>
</div>

Author: Raghava

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *


*

'