使用 jQuery 創(chuàng)建簡(jiǎn)單的彈出窗口

在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，您可能會(huì)遇到想要在頁(yè)面中顯示附加信息或內(nèi)容的情況。根據(jù)特定的用戶操作單獨(dú)彈出窗口。本文將指導(dǎo)您完成使用 jQuery 創(chuàng)建簡(jiǎn)單彈出窗口的過程，重點(diǎn)是顯示帶標(biāo)簽的電子郵件文本框。

第 1 步：CSS 樣式

首先，定義 CSS 樣式來(lái)自定義彈出窗口的外觀。

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 定義彈出元素、鏈接元素的樣式觸發(fā)彈出窗口、標(biāo)簽和彈出窗口中的段落元素。

第 2 步：JavaScript 功能

接下來(lái)，創(chuàng)建 JavaScript 函數(shù)來(lái)處理彈出窗口行為：

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()：該函數(shù)關(guān)閉彈出窗口并從鏈接中刪除選定狀態(tài)element.
• $('#contact').on('click', ...)：當(dāng)單擊 ID 為 'contact' 的元素時(shí)，此事件處理程序會(huì)切換彈出窗口的可見性。
• $('.close').on('click', ...)：當(dāng) 'close' 元素為單擊。
• $.fn.slideFadeToggle：此自定義函數(shù)平滑淡入淡出并切換彈出窗口的可見性。

第 3 步：HTML 結(jié)構(gòu)

最后，定義彈出窗口和鏈接的 HTML 結(jié)構(gòu)元素：

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

此 HTML 定義彈出內(nèi)容，包括帶有電子郵件輸入和消息文本區(qū)域的表單，以及 ID 為“聯(lián)系人”的鏈接元素。

通過組合這些步驟，您可以創(chuàng)建一個(gè)簡(jiǎn)單的彈出窗口，該彈出窗口在單擊“聯(lián)系我們”鏈接時(shí)出現(xiàn)，并包含帶標(biāo)簽的電子郵件文本框。該技術(shù)可以輕松定制和調(diào)整以滿足您的特定要求。

以上是如何創(chuàng)建帶有標(biāo)簽電子郵件文本框的簡(jiǎn)單 jQuery 彈出窗口？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！