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

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">
<p>この HTML は、電子メール入力とメッセージ テキストエリアを含むフォーム、および「contact」という ID を持つリンクされた要素を含むポップアップ コンテンツを定義します。</p>
<p>これらの手順を組み合わせることで、[お問い合わせ] リンクをクリックしたときに表示され、ラベル付きの電子メール テキスト ボックスを含む単純なポップアップを作成できます。この手法は、特定の要件に合わせて簡単にカスタマイズおよび適応できます。</p>
</form>
</div>

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