ラベル付きメールテキストボックスを使用して単純な jQuery ポップアップを作成する方法-CSSチュートリアル-php.cn

ラベル付きメールテキストボックスを使用して単純な jQuery ポップアップを作成する方法

Linda Hamilton

リリース： 2024-12-19 01:22:11

オリジナル

953 人が閲覧しました

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

jQuery を使用した単純なポップアップの作成

Web ページをデザインするとき、追加の情報やコンテンツを追加のポップアップに表示したい場合があるかもしれません。特定のユーザーアクションごとに別のポップアップウィンドウが表示されます。この記事では、ラベル付きメールテキストボックスの表示に重点を置き、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(): この関数はポップアップを閉じ、リンクされた要素から選択状態を削除します。
$('#contact').on('click', ...): このイベントハンドラーは、要素の ID が次の場合にポップアップの表示/非表示を切り替えます。 'contact' がクリックされました。
$('.close').on('click', ...): このイベントハンドラーは、'close' 要素がクリックされたときにポップアップを閉じます。
$.fn.slideFadeToggle: このカスタム関数は、ポップアップの表示をスムーズにフェードさせて切り替えます。

ステップ 3: HTML 構造

最後に、ポップアップとリンクされたものの HTML 構造を定義します。 element:

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

ログイン後にコピー

この HTML は、電子メール入力とメッセージテキストエリアを含むフォーム、および「contact」という ID を持つリンクされた要素を含むポップアップコンテンツを定義します。

これらの手順を組み合わせることで、[お問い合わせ] リンクをクリックしたときに表示され、ラベル付きの電子メールテキストボックスを含む単純なポップアップを作成できます。この手法は、特定の要件に合わせて簡単にカスタマイズおよび適応できます。

以上がラベル付きメールテキストボックスを使用して単純な jQuery ポップアップを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。