温馨提示×

ColorBox jQuery如何实现自动关闭

小樊
82
2024-10-23 16:48:23
栏目: 编程语言

要使用jQuery实现ColorBox的自动关闭,您可以在初始化ColorBox时设置close选项为false。然后,您可以使用afterOpen回调函数来设置一个定时器,在指定的时间后关闭ColorBox。以下是一个示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ColorBox Auto Close</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/colorbox/1.5.29/colorbox.min.css">
</head>
<body>
    <a href="https://example.com" class="colorbox">Open ColorBox</a>

    <script>
        $(document).ready(function() {
            $('.colorbox').colorbox({
                close: false,
                afterOpen: function() {
                    setTimeout(function() {
                        $('.colorbox').colorboxClose();
                    }, 3000); // 设置自动关闭的时间,单位为毫秒(这里设置为3秒)
                }
            });
        });
    </script>
</body>
</html>

在这个示例中,当您点击“Open ColorBox”链接时,ColorBox将打开,并在3秒后自动关闭。您可以根据需要调整setTimeout函数中的时间值。

0