如何创建带有标签电子邮件文本框的简单 jQuery 弹出窗口？-css教程-PHP中文网

如何创建带有标签电子邮件文本框的简单 jQuery 弹出窗口？

Linda Hamilton

发布： 2024-12-19 01:22:11

原创

954 人浏览过

How to Create a Simple jQuery Popup with a Labeled Email Textbox?

使用 jQuery 创建简单的弹出窗口

在设计网页时，您可能会遇到想要在页面中显示附加信息或内容的情况。根据特定的用户操作单独弹出窗口。本文将指导您完成使用 jQuery 创建简单弹出窗口的过程，重点是显示带标签的电子邮件文本框。

第 1 步：CSS 样式

首先，定义 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;
}

登录后复制

此 CSS 定义弹出元素、链接元素的样式触发弹出窗口、标签和弹出窗口中的段落元素。

第 2 步：JavaScript 功能

接下来，创建 JavaScript 函数来处理弹出窗口行为：

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()：该函数关闭弹出窗口并从链接中删除选定状态element.
$('#contact').on('click', ...)：当单击 ID 为 'contact' 的元素时，此事件处理程序会切换弹出窗口的可见性。
$('.close').on('click', ...)：当 'close' 元素为单击。
$.fn.slideFadeToggle：此自定义函数平滑淡入淡出并切换弹出窗口的可见性。

第 3 步：HTML 结构

最后，定义弹出窗口和链接的 HTML 结构元素：

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

登录后复制

此 HTML 定义弹出内容，包括带有电子邮件输入和消息文本区域的表单，以及 ID 为“联系人”的链接元素。

通过组合这些步骤，您可以创建一个简单的弹出窗口，该弹出窗口在单击“联系我们”链接时出现，并包含带标签的电子邮件文本框。该技术可以轻松定制和调整以满足您的特定要求。

以上是如何创建带有标签电子邮件文本框的简单 jQuery 弹出窗口？的详细内容。更多信息请关注PHP中文网其他相关文章！