使用jQuery 建立簡(jiǎn)單的彈出視窗

在設(shè)計(jì)網(wǎng)頁時(shí)，您可能會(huì)遇到想要在頁面中顯示附加資訊或內(nèi)容的情況。根據(jù)特定的使用者操作單獨(dú)彈出視窗。本文將引導(dǎo)您完成使用 jQuery 建立簡(jiǎn)單彈出視窗的過程，重點(diǎn)是顯示標(biāo)籤的電子郵件文字方塊。

第 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 定義彈出元素、連結(jié)元素的樣式觸發(fā)彈出視窗、標(biāo)籤和彈出視窗中的段落元素。

第 2 步：JavaScript 功能

接下來，建立 JavaScript 函數(shù)來處理彈出視窗行為：

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)閉彈出視窗並從連結(jié)中刪除選取狀態(tài)element.
• $('#contact').on('click', ...)：當(dāng)按一下ID 為'contact' 的元素時(shí)，此事件處理程序會(huì)切換彈出視窗的可見性。
• $('.close').on('click', ...)：當(dāng) 'close' 元素為點(diǎn)選。
• $.fn.slideFadeToggle：此自訂函數(shù)平滑淡入淡出並切換彈出視窗的可見性。

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

最後，定義彈出視窗與連結(jié)的HTML 結(jié)構(gòu)元素：

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

此HTML定義彈出內(nèi)容，包括帶有電子郵件輸入和訊息文字區(qū)域的表單，以及ID 為「聯(lián)絡(luò)人」的連結(jié)元素。

透過組合這些步驟，您可以建立一個(gè)簡(jiǎn)單的彈出窗口，該彈出視窗在點(diǎn)擊「聯(lián)絡(luò)我們」連結(jié)時(shí)出現(xiàn)，並包含帶有標(biāo)籤的電子郵件文字方塊。該技術(shù)可以輕鬆定制和調(diào)整以滿足您的特定要求。

以上是如何建立帶有標(biāo)籤電子郵件文字方塊的簡(jiǎn)單 jQuery 彈出視窗？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！