如何建立帶有標籤電子郵件文字方塊的簡單 jQuery 彈出視窗？-css教學-PHP中文網

如何建立帶有標籤電子郵件文字方塊的簡單 jQuery 彈出視窗？

Linda Hamilton

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

原創

963 人瀏覽過

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中文網其他相關文章！