利用第三方库实现网页窗效果

最新推荐文章于 2024-10-11 17:39:47 发布

架构师ZYL

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量352

点赞数 9

分类专栏：项目开发遇到的问题文章标签： javascript jquery bootstrap html5

本文链接：https://blog.csdn.net/2301_81807150/article/details/140924170

版权

项目开发遇到的问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目初衷

我在去做一个项目时，遇到想到一个不错的idea,由于网站需要长期生存,站长迫不得已要当“网络乞丐”，让网站维持下来，想到了进去网站时设置一个弹窗，寻求看官打赏。话不多说，这里使用的是bootstrap.min.css、bootstrap.min.js、jquery.min.js

可以支持一下作者制作的一个轻量级免费图片压缩网站https://qingtuyasuozhan.cn/一切费用用于网站的生存。

上效果图:

效果图

我们简单地去分析：

1.HTML结构:

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="popupModalLabel" aria-hidden="true" id="popupModal">
    <!-- Modal content goes here -->
</div>

这部分定义了一个Bootstrap的模态框容器，`id="popupModal"`用于在JS中引用。

2.CSS样式:

.modal-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

这些样式确保模态框内的内容居中显示。

3.图像和文本:

<img id="popupImage" class="img-fluid" src="1.jpg" alt="图片">
<p id="popupText" class="mt-3">站长开发"轻图压缩站"不易,为了维持网站的正常运行,各位看官可以自愿打赏打赏(✿◠‿◠)</p>

这里定义了模态框内的主要内容：一张图片和一段请求打赏的文本。

4.倒计时和按钮:

<div id="countdown" class="mt-3"></div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>

倒计时区域和“取消”按钮，用于控制模态框的关闭。

6.JavaScript功能:

$(document).ready(function() {
    // JavaScript logic goes here
});

使用jQuery来控制模态框的显示、倒计时和按钮事件。

模态框显示:

$('#popupModal').modal('show');

这行代码在页面加载完毕后立即显示模态框。

倒计时功能:

var countdown = 10;
var countdownElement = $('#countdown');
var interval = setInterval(function() {
    countdownElement.text(countdown);
    countdown--;
    if (countdown === 0) {
        clearInterval(interval);
        $('#popupModal').modal('hide');
    }
}, 1300);

这部分代码实现了一个倒计时机制，每1.3秒更新一次倒计时显示，直到倒计时结束，模态框自动关闭。

按钮事件:

$('.modal-footer .btn-secondary').on('click', function() {
    clearInterval(interval);
    $('#popupModal').modal('hide');
});

这个事件处理程序确保当用户点击“取消”按钮时，倒计时被清除，模态框被关闭。

通过以上分析，我们可以看到这段代码是一个完整的模态框弹出和交互功能的实现，用于向用户展示信息并提供交互控制。

上代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.min.css">

</head>
    <style>
        .modal-body {
            display: flex; /* 使用Flex布局 */
            flex-direction: column; /* 内容垂直排列 */
            justify-content: center; /* 垂直居中 */
            align-items: center; /* 水平居中 */
            text-align: center; /* 文字居中 */
        }
        #popupImage {
            max-width: 60%; /* 确保图片宽度不超过容器宽度 */
            height: 60%; /* 保持图片比例 */
            margin-bottom: 1rem; /* 添加底部外边距 */
        }
        #popupText {
            font-size: 1.33em; /* 减小字体大小 */
            line-height: 1.5; /* 保持良好的行间距 */
        }
        .btn-secondary {
            background-color: #EAEAEF;
            border-color: #EAEAEF; /* 可选，如果需要修改边框颜色 */
            color: #4c8aca; /* 修改文字颜色，可以根据需要调整 */
        }

        </style>
<body>
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="popupModalLabel" aria-hidden="true" id="popupModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <!-- Bootstrap的模态框关闭按钮 -->
                    <h5 class="modal-title" id="popupModalLabel">温馨提醒</h5>
                </div>
                <div class="modal-body">
                    <img id="popupImage" class="img-fluid" src="1.jpg" alt="图片">
                    <p id="popupText" class="mt-3">☛站长开发"轻图压缩站"不易,为了维持网站的正常运行,各位看官可以自愿打赏打赏(✿◠‿◠)</p>
                    <div id="countdown" class="mt-3"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            var countdown = 10;
            var countdownElement = $('#countdown');
            var modal = $('#popupModal');

            // 显示模态框
            modal.modal('show');

            // 更新倒计时
            var interval = setInterval(function() {
                countdownElement.text(countdown);
                if (countdown === 0) {
                    // 自动关闭模态框
                    clearInterval(interval);
                    modal.modal('hide');
                } else {
                    countdown--;
                }
            }, 1300); // 注意：倒计时间隔应为1000毫秒（1秒），而非10000毫秒（10秒）
        // 为取消按钮添加点击事件，清除定时器并关闭模态框
            $('.modal-footer .btn-secondary').on('click', function() {
                clearInterval(interval);
                modal.modal('hide');
            });
        });
    </script>
</body>
</html>