How to Create Simple Popups with jQuery?

Creating Simple Popups with jQuery

Many web applications require the ability to display additional information or allow user input without leaving the current page. A common solution for this is to use a popup window. In this article, we will explore how to create a simple popup using jQuery.

Customizing the Appearance

To customize the appearance of the popup, adjust the following 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:50;
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;
}

jQuery Implementation

Next, implement the jQuery code:

function deselect(e) {
$('.pop').slideFadeToggle(function() {

e.removeClass('selected');

});
}

$(function() {
$('#contact').on('click', function() {

if($(this).hasClass('selected')) {
  deselect($(this));               
} else {
  $(this).addClass('selected');
  $('.pop').slideFadeToggle();
}
return false;

});

$('.close').on('click', function() {

deselect($('#contact'));
return false;

});
});

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

HTML Structure

Finally, add the HTML structure to display the popup:

<p><label for="email">Your email or name</label><input type="text" size="30" name="email">

The above is the detailed content of How to Create Simple Popups with jQuery?. For more information, please follow other related articles on the PHP Chinese website!