Creating a Simple Popup with jQuery

When designing web pages, you may encounter situations where you want to display additional information or content in a separate popup window upon a specific user action. This article will guide you through the process of creating a simple popup using jQuery, focusing on displaying a labeled email text box.

Step 1: CSS Styling

First, define the CSS styles to customize the appearance of the popup.

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;
}

This CSS defines styles for the popup element, the linked element that triggers the popup, labels, and paragraph elements within the popup.

Step 2: JavaScript Functionality

Next, create the JavaScript functions to handle the popup behavior:

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);
};

• deselect(): This function closes the popup and removes the selected state from the linked element.
• $('#contact').on('click', ...): This event handler toggles the visibility of the popup when the element with the ID of 'contact' is clicked.
• $('.close').on('click', ...): This event handler closes the popup when the 'close' element is clicked.
• $.fn.slideFadeToggle: This custom function smoothly fades and toggles the visibility of the popup.

Step 3: HTML Structure

Finally, define the HTML structure for the popup and the linked element:

<div class="messagepop pop">
  <form method="post">

This HTML defines the popup content, including a form with an email input and a message textarea, as well as the linked element with an ID of 'contact'.

By combining these steps, you can create a simple popup that appears when the 'Contact Us' link is clicked and contains a labeled email text box. This technique can be easily customized and adapted to meet your specific requirements.

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