jquery 팝업 상자가 몇 초 후에 사라집니다.-프런트엔드 Q&A-php.cn

jquery 팝업 상자가 몇 초 후에 사라집니다.

王林

풀어 주다： 2023-05-08 18:35:38

원래의

1064명이 탐색했습니다.

웹 디자인 및 개발에서 팝업 상자는 일반적으로 일부 정보를 표시하거나 확인하는 데 사용됩니다. 그러나 팝업 상자가 너무 오랫동안 유지되면 사용자 경험에 영향을 미칠 수 있으며 심지어 잘못된 사용자 작업이 발생하므로 몇 초 내에 팝업 상자를 사라지게 만드는 방법은 매우 중요한 문제입니다. 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>

로그인 후 복사

여기서 팝업 상자의 기본 스타일이 설정된 팝업 클래스 이름의 div가 생성됩니다. 스타일은 실제 프로젝트의 특정 요구에 따라 조정될 수 있습니다.

2. jQuery를 사용하여 팝업 상자 표시 및 숨기기 제어

jQuery는 팝업 상자 표시 및 숨기기를 제어하는 간단한 방법을 제공합니다. 이를 달성하기 위해 다음 코드를 사용할 수 있습니다.

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

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

로그인 후 복사

여기서는 jQuery 선택기를 사용하여 클래스 이름이 팝업인 요소를 선택하고, show() 및 hide() 메서드를 사용하여 팝업 상자를 표시하거나 숨깁니다. 그러나 이 방법으로는 팝업 상자가 자동으로 사라지는 목적을 달성할 수 없습니다.

3. 지연 기능을 사용하여 팝업 상자가 사라지는 시간을 제어하세요

팝업 상자가 몇 초 안에 사라지게 하려면 jQuery의 Delay() 및 fadeOut() 메서드를 사용할 수 있습니다. 이를 달성하기 위해 다음 코드를 사용할 수 있습니다.

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

로그인 후 복사

여기서 Delay() 메서드를 사용하여 팝업 상자가 사라지는 시간을 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 선택기를 사용하여 클래스 이름 팝업이 있는 요소를 선택한 다음 페이지가 로드된 후 팝업 상자를 표시하고 지연() 및 fadeOut() 메서드를 사용합니다. 3초 동안 팝업 상자를 구현하려면 나중에 효과가 사라집니다.

요약

이 기사에서는 jQuery를 사용하여 몇 초 내에 팝업 상자가 사라지는 효과를 얻는 방법을 소개합니다. 먼저 기본 팝업 상자를 만든 다음 jQuery의 선택기와 show()를 사용해야 합니다. , hide(), Delay() , fadeOut() 및 기타 함수를 사용하여 팝업 상자의 표시 및 숨기기를 제어하고 최종적으로 몇 초 내에 팝업 상자가 사라지는 효과를 얻을 수 있습니다. 이 글이 초보자들에게 도움이 되기를 바랍니다.

위 내용은 jquery 팝업 상자가 몇 초 후에 사라집니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!