jqueryのポップアップボックスは数秒で消えます-フロントエンドQ&A-php.cn

jqueryのポップアップボックスは数秒で消えます

王林

リリース： 2023-05-08 18:35:38

オリジナル

1063 人が閲覧しました

Web デザインと開発では、ポップアップボックスは通常、何らかの情報を要求したり確認したりするために使用されます。しかし、ポップアップボックスが長時間表示され続けると、ユーザーエクスペリエンスに影響を与えたり、ユーザーの不正な操作を引き起こしたりするため、ポップアップボックスをいかに数秒以内に消すかが非常に重要な課題となります。 jQuery は簡単な解決策を提供します. この記事では、jQuery を使用して、数秒で消えるポップアップボックスを実現する方法を紹介します。

1. ポップアップボックスの作成

始める前に、基本的なポップアップボックスを作成する必要があります。以下に示すように、CSS と HTML を使用して単純なポップアップボックスを作成できます。

<style>
    .popup{
        font-size: 16px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 9999;
        background-color: #ffffff;
        border: 1px solid #dddddd;
        padding: 20px;
    }
</style>
<div class="popup">
    这是一个弹出框
</div>

ログイン後にコピー

ここでは、popup というクラス名を持つ div が作成され、その中にポップアップボックスの基本スタイルが設定されています。が設定されています。実際のプロジェクトの特定のニーズに応じてスタイルを調整できます。

2. jQuery を使用してポップアップボックスの表示と非表示を制御する

jQuery は、ポップアップボックスの表示と非表示を制御するための簡潔なメソッドを提供します。これを実現するには、次のコードを使用できます。

// 显示弹出框
$(".popup").show();

// 隐藏弹出框
$(".popup").hide();

ログイン後にコピー

ここでは、jQuery セレクターを使用してクラス名ポップアップの要素を選択し、show() メソッドと Hide() メソッドを使用して表示と非表示を切り替えます。ポップアップボックス。ただし、この方法ではポップアップボックスが自動的に消えるという目的を達成することはできません。

3. 遅延関数を使用してポップアップボックスが消える時間を制御する

ポップアップボックスを数秒以内に消すには、jQuery の遅延() とfadeOut() メソッド。これを実現するには、次のコードを使用します。

// 延迟3秒后隐藏弹出框
$(".popup").delay(3000).fadeOut();

ログイン後にコピー

ここでは、lay() メソッドを使用してポップアップボックスの消失時間を 3 秒遅らせ、次に fadeOut() メソッドを使用して、ポップアップボックスが 3 秒以内に徐々に消えます。これにより、ポップアップボックスが数秒以内に消える効果が得られます。

4. 完全なコード実装

ここでは、jQuery を使用してポップアップボックスが数秒以内に消える効果を実現する方法を紹介しました。完全なコード実装は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery弹出框几秒消失</title>
    <style>
        .popup{
            font-size: 16px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            z-index: 9999;
            background-color: #ffffff;
            border: 1px solid #dddddd;
            padding: 20px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function(){
            // 显示弹出框
            $(".popup").show();
            // 延迟3秒后隐藏弹出框
            $(".popup").delay(3000).fadeOut();
        });
    </script>
</head>
<body>
    <div class="popup">
        这是一个弹出框
    </div>
</body>
</html>

ログイン後にコピー

ここでは、jQuery セレクターを使用してクラス名がポップアップの要素を選択し、ページが読み込まれた後にポップアップボックスを表示してから、lay() とfadeOut() メソッドを使用してポップアップを実現し、フレームが 3 秒後に消える効果を実現します。

概要

この記事では、jQuery を使用してポップアップボックスが数秒以内に消える効果を実現する方法を紹介します。まず、基本的なポップアップボックスを作成する必要があります。次に、jQuery のセレクターと show() 、 Hide()、Delay()、fadeOut() およびその他の関数を使用して、ポップアップボックスの表示と非表示を制御し、最終的にポップアップボックスが画面内で消える効果を実現します。数秒。この記事が初心者の方に役立つことを願っています。

以上がjqueryのポップアップボックスは数秒で消えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。