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").on('click', function(event) {
		$(this).addClass("selected").parent().append( $('messagepop').get() );
		$(".pop").slideFadeToggle(function() {
			$("#email").focus();
		});
		return false;
	});

	$(".close").on('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

<div class="messagepop pop" style="display:none;">
	<form method="post" id="new_message" action="/messages">
		<p>
			<label for="email">Your email or name</label>
			<input type="text" size="30" name="email" id="email" />
		</p>
		<p>
			<label for="body">Message</label>
			<textarea rows="6" name="body" id="body" cols="35"></textarea>
		</p>
		<p>
			<input type="submit" value="Send Message" name="commit" id="message_submit" /> or
			<a class="close" href="/">Cancel</a>
		</p>
	</form>
</div>

The above 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.

Abhishek Gupta
Follow me
Latest posts by Abhishek Gupta (see all)

2 Replies to “Generating a simple jquery popup”

Leave a Reply