jqueryはポップアップ後に自動的に閉じます

Web ページでは、jquery はさまざまなインタラクションやアニメーション効果を簡単に実現できる広く使用されている JavaScript ライブラリです。その中でも、ポップアップ ボックスは一般的な対話方法であり、ユーザーに操作の実行を案内したり、関連情報の入力を求めたりすることができます。通常、ポップアップ ボックスは手動で閉じる必要がありますが、状況によっては自動的に閉じる効果を実現する必要があるため、この記事では jquery を使用してポップアップ ボックスの自動閉じる機能を実現する方法を紹介します。

1. ポップアップ ボックスの基本的な実装

jquery では、ポップアップ ボックス プラグインを使用するか、独自のコードを記述してポップアップの効果を実現できます。箱。ここでは、ポップアップボックスの効果を簡単に実現するために、自分でコードを記述する方法を例に挙げます。

HTML コード

<button id="btn">点击弹出框</button>

<div class="mask">
  <div class="popup">
    <h3>弹出框标题</h3>
    <p>弹出框内容</p>
    <button class="close-btn">关闭</button>
  </div>
</div>

CSS コード

.mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6)
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  text-align: center;
}

.close-btn {
  margin-top: 20px;
  padding: 5px 10px;
  border: none;
  background-color: #ff6700;
  color: #ffffff;
  border-radius: 5px;
  cursor: pointer;
}

JS コード

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

上記のコードを使用すると、単純なポップアップ ボックス効果を実現できます。ボタンをクリックすると、ページ上に黒の半透明の背景が表示され、白い枠がポップアップ表示されます。閉じるボタンをクリックすると、ポップアップ枠が消えます。次に、ポップアップボックスの自動閉じる機能の実装方法を紹介します。

2. setTimeout を使用して自動シャットダウンを実現します

jquery には、指定した時間後にコードを自動的に実行できる setTimeout メソッドがあります。このメソッドを使用すると、ポップアップ ボックスを自動的に閉じる機能を実現できます。

HTML コード (上記のコードと同じ)

CSS コード (上記のコードと同じ)

JS コード

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);

    // 代码开始执行后，1.5秒后执行自动关闭
    setTimeout(function() {
      $('.mask').fadeOut(500);
    }, 1500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

上記のコードでは、ポップアップ ボックスが表示された後 (マスク要素 fadeIn)、タイマーを設定し、自動終了コードをタイマーに入力します。1500 は、自動終了コードが 1.5 秒後に実行されることを意味します (マスク要素 fadeOut)。もちろん、さまざまなニーズに合わせて時間を長くまたは短く設定することもできます。

3. アニメーション アニメーションを使用して自動終了を実現する

setTimeout メソッドを使用して自動終了を実現することに加えて、jquery アニメーション効果を使用して同様の効果を実現することもできます。 jquery の animate メソッドを使用して、ポップアップ ボックスを徐々に消すことで、自動的に閉じるのと同様の効果を実現できます。

HTML コード (上記のコードと同じ)

CSS コード (上記のコードと同じ)

JS コード

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);

    // 延迟1.5秒后开始执行动画
    setTimeout(function() {
      $('.popup').animate({opacity: 0});
      $('.mask').animate({opacity: 0}, function() {
        $(this).hide();
      })
    }, 1500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

上記のコードでは、また、ポップアップ ボックスが 1.5 秒後に消え始めるようにタイマーを設定します。ここで消すのは、fadeOutメソッドを直接使うのではなく、animateメソッドを使ってopacity(透明度)属性を1から0まで徐々に変化させます。透明度が 0 になると、コールバック関数が呼び出され、マスク要素が非表示になります。これにより、自動シャットダウンと同様の効果が完成します。

まとめ

この記事では、jqueryを使ってポップアップボックスの自動閉じる機能を実現する方法を紹介します。 setTimeout メソッドまたは animate メソッドを使用して、自動終了効果を実現できます。この記事が皆さんのお役に立てば幸いです。

以上がjqueryはポップアップ後に自動的に閉じますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。