jqueryのポップアップウィンドウの作り方

jQuery は、HTML ドキュメントの走査と操作、イベント処理、アニメーション設計、および Ajax インタラクションを簡素化する、高速で簡潔な JavaScript ライブラリです。 Web 開発では、ポップアップ ウィンドウは一般的な対話方法です。この記事ではjQueryを使ってポップアップウィンドウを作成する方法を紹介します。

まず、HTML ファイルに jQuery ライブラリの CDN リンクを導入する必要があります:

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

次に、ポップアップ コンテンツを含む HTML パーツを作成します:

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Hello World!</p>
  </div>
</div>

ここで、 <div> 要素は、ID myModal およびクラス名 modal; < を持つポップアップ ウィンドウ コンテナーを指定します。 div> この要素には、クラス名 modal-content を持つ別のコンテナが含まれており、ポップアップ ウィンドウのコンテンツを表示するために使用されます。要素は close# というクラス名を指定します ## のフォーク アイコンはポップアップ ウィンドウを閉じるために使用されます;

要素にはポップに表示するテキスト コンテンツが含まれます-アップウィンドウ。 次に、ポップアップ ウィンドウを実装するための JavaScript コードを記述する必要があります:

// 获取弹窗元素
var modal = document.getElementById('myModal');

// 获取叉子图标元素
var closeBtn = document.getElementsByClassName('close')[0];

// 当叉子图标被点击时，关闭弹窗
closeBtn.onclick = function() {
  modal.style.display = "none";
}

// 当用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// 当按钮被点击时，显示弹窗
$('#myButton').click(function() {
  modal.style.display = "block";
});

ここでは、まずポップアップ ウィンドウ要素とフォーク アイコン要素を取得します。次に、フォーク アイコンがクリックされると、

onclick

イベントを使用してポップアップ ウィンドウの表示プロパティを

none に設定し、ポップアップ ウィンドウを閉じます。次に、window オブジェクトの onlick イベントを使用して、ウィンドウの他の部分でユーザーのクリック イベントをリッスンし、ユーザーがクリックしたときにポップアップ ウィンドウを閉じることができるようにします。ポップアップウィンドウの外側の領域。 最後に、ボタンのクリック イベントをリッスンし、jQuery を使用して、クリックされたときにポップアップ ウィンドウの表示プロパティを block

に設定します。これにより、ポップアップ ウィンドウが表示されます。ここでは、jQuery の

click() メソッドを使用してクリック イベントを登録します。 上記のコードを使用して、基本的な jQuery ポップアップの例を作成しました。実際のプロジェクトでは、さまざまなニーズに合わせてスタイルと JavaScript コードを使用してポップアップ ウィンドウをカスタマイズできます。

概要:

jQuery は、HTML ドキュメントの走査と操作、イベント処理、アニメーション デザイン、および Ajax インタラクションを簡素化するために使用できる人気のある JavaScript ライブラリです。 jQuery を使用するとポップアップ ウィンドウを簡単に作成でき、必要に応じてポップアップ ウィンドウのスタイルと機能をカスタマイズできます。実際のプロジェクトでは、jQuery を使用して、より高度なユーザー インタラクション エクスペリエンスを実現できます。

以上がjqueryのポップアップウィンドウの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。