Generating a simple jquery popup

Recently I needed to make a simple pop up box in wordpress and I searched for plugins to achieve what I wanted but failed. Well, if you look for it, you will surely find many plugins for jquery popup as well as wordpress popup but none helped me. In my lookout for the plugin I found this really cool and simple script that would do the required work for you with just simple tweaks.

Demo: Click me.


The CSS

a.selected {
  background-color:#1F75CC;
  color:white;
  z-index:100;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  text-align:left;
  width:394px;
  z-index:500000;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

The javascript/jQuery:

$(function() {
	$("#contact").live('click', function(event) {
		$(this).addClass("selected").parent().append( $('messagepop').get() );
		$(".pop").slideFadeToggle(function() {
			$("#email").focus();
		});
		return false;
	});

	$(".close").live('click', function() {
		$(".pop").slideFadeToggle(function() { 
			$("#contact").removeClass("selected");
		});
		return false;
	});
});

$.fn.slideFadeToggle = function(easing, callback) {
	return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
};

And the HTML

Contact Us


This contact us form is just a small example of all that this simple script could do.

Note: This script is not my. I found it here: How to generate a simple popup using jQuery.

2 Replies to “Generating a simple jquery popup”

Leave a Reply

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