js 提示框怎么永

JavaScript 提示框的持久显示方法包括：使用自定义HTML提示框、使用第三方库、利用CSS动画。其中，使用自定义HTML提示框是最为灵活和常见的方法。

为了保持提示框长时间显示，最常见的方法就是使用自定义HTML提示框。这种方法不仅可以控制提示框的外观，还能控制其显示时间和位置。通过结合JavaScript和CSS，可以实现持久显示且用户友好的提示框。

一、自定义HTML提示框

1、创建基本HTML结构

首先，我们需要创建一个基本的HTML结构，用于显示提示框。这个提示框将包含一个用于显示提示信息的div。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Alert Box</title>
    <style>
        .alert-box {
            display: none;
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #f44336;
            color: white;
            border-radius: 5px;
            z-index: 1000;
        }
        .alert-box.show {
            display: block;
        }
    </style>
</head>
<body>
    <div id="alertBox" class="alert-box">
        This is a custom alert box!
    </div>
</body>
</html>

2、添加JavaScript逻辑

接下来，我们需要编写JavaScript代码，以便在需要的时候显示和隐藏提示框。这里，我们使用简单的函数来控制提示框的显示和隐藏。

document.addEventListener('DOMContentLoaded', () => {
    const alertBox = document.getElementById('alertBox');
    function showAlert(message) {
        alertBox.textContent = message;
        alertBox.classList.add('show');
    }
    function hideAlert() {
        alertBox.classList.remove('show');
    }
    // Example usage:
    showAlert('This alert will stay visible');
});

3、增强提示框功能

为了提升用户体验，我们可以添加更多功能，比如自动关闭提示框、带有关闭按钮的提示框等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Alert Box</title>
    <style>
        .alert-box {
            display: none;
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #f44336;
            color: white;
            border-radius: 5px;
            z-index: 1000;
        }
        .alert-box.show {
            display: block;
        }
        .close-btn {
            background-color: white;
            color: #f44336;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            float: right;
        }
    </style>
</head>
<body>
    <div id="alertBox" class="alert-box">
        <button class="close-btn" onclick="hideAlert()">Close</button>
        <span id="alertMessage">This is a custom alert box!</span>
    </div>
    <script>
        const alertBox = document.getElementById('alertBox');
        const alertMessage = document.getElementById('alertMessage');
        function showAlert(message) {
            alertMessage.textContent = message;
            alertBox.classList.add('show');
        }
        function hideAlert() {
            alertBox.classList.remove('show');
        }
        // Example usage:
        showAlert('This alert will stay visible until you close it');
    </script>
</body>
</html>

二、使用第三方库

1、选择合适的库

在开发中，使用第三方库可以快速实现复杂功能。常见的提示框库包括SweetAlert、Toastr等。

2、示例：使用SweetAlert

SweetAlert是一个非常流行的JavaScript库，可以创建美观、灵活的提示框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SweetAlert Example</title>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
    <button onclick="showSweetAlert()">Show Alert</button>
    <script>
        function showSweetAlert() {
            swal({
                title: "Custom Alert",
                text: "This alert will stay visible until you close it",
                icon: "info",
                buttons: true,
                dangerMode: true,
            });
        }
    </script>
</body>
</html>

3、示例：使用Toastr

Toastr是另一个非常受欢迎的库，用于创建非阻塞通知。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toastr Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>
<body>
    <button onclick="showToastr()">Show Alert</button>
    <script>
        function showToastr() {
            toastr.info('This alert will stay visible until you close it');
        }
    </script>
</body>
</html>

三、利用CSS动画

1、使用CSS关键帧动画

通过CSS关键帧动画，可以实现提示框的持续显示，同时可以控制其显示和隐藏的动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation Alert</title>
    <style>
        .alert-box {
            display: none;
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #f44336;
            color: white;
            border-radius: 5px;
            z-index: 1000;
            animation: fadeIn 0.5s, fadeOut 0.5s 4.5s;
        }
        .alert-box.show {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
    </style>
</head>
<body>
    <div id="alertBox" class="alert-box">
        This alert will disappear after 5 seconds
    </div>
    <script>
        const alertBox = document.getElementById('alertBox');
        function showAlert(message) {
            alertBox.textContent = message;
            alertBox.classList.add('show');
            setTimeout(() => {
                alertBox.classList.remove('show');
            }, 5000);
        }
        // Example usage:
        showAlert('This alert will stay visible for 5 seconds');
    </script>
</body>
</html>

通过上述方法，可以实现持久显示的JavaScript提示框。选择合适的方法取决于具体的需求和项目的复杂度。无论是自定义HTML提示框、使用第三方库还是利用CSS动画，都可以实现灵活且用户友好的提示框显示效果。