原生JS+CSS+HTML实现弹框 & 轮播

最新推荐文章于 2021-06-24 10:36:46 发布

微笑边缘的金元宝

最新推荐文章于 2021-06-24 10:36:46 发布

阅读量462

点赞数

分类专栏： javascript html

本文链接：https://blog.csdn.net/HeMister/article/details/109450761

版权

javascript 同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

html

12 篇文章 0 订阅

订阅专栏

PC端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框实现</title>
    <style>
        h4 {
            margin-left: 20px;
        }
        p {
            text-align: center;
        }
        .modal {
            display: none;
            width: 100%;
            height: 100%;
            opacity: 0;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            background-color: rgba(0, 0, 0, 0.5);
            transition: opacity 0.2s;
            -moz-transition: opacity 0.2s; /* Firefox 4 */
            -webkit-transition: opacity 0.2s; /* Safari 和 Chrome */
            -o-transition: opacity 0.2s; /* Opera */
        }

        .modal-content {
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            width: 50%;
            max-width: 700px;
            height: 40%;
            max-height: 500px;
            margin: 100px auto;
            border-radius: 10px;
            background-color: #fff;
            resize: both;
            overflow: auto;
        }

        .modal-header {
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close {
            color: #b7b7b7;
            font-size: 30px;
            font-weight: bold;
            margin-right: 20px;
            transition: all 0.3s;
        }

        .close:hover,
        .close:focus {
            color: #95b4ed;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-body {
            padding: 10px;
            font-size: 16px;
            box-sizing: border-box;
        }

        .modal-footer {
            box-sizing: border-box;
            border-top: 1px solid #ccc;
            display: flex;
            padding: 15px;
            justify-content: flex-end;
            align-items: center;
        }

        .modal-footer button {
            width: 60px;
            height: 35px;
            padding: 5px;
            box-sizing: border-box;
            margin-right: 10px;
            font-size: 16px;
            color: white;
            border-radius: 5px;
            background-color: cornflowerblue;

        }

        .modal-footer button:hover,
        .modal-footer button:focus {
            background-color: #95b4ed;
            cursor: pointer;
        }

        @media only screen and (max-width: 700px) {
            .modal-content {
                width: 80%;
            }
        }
    </style>

</head>

<body><button class="btn" id="showModel">模态框展示</button>
    <div id="modal" class="modal">
        <div class="modal-content">
            <header class="modal-header">
                <h4>模态框标题</h4><span class="close">×</span>
            </header>
            <div class="modal-body">
                <p>HTML+CSS+JS原生实现响应式模态框演示！</p>
            </div>
            <footer class="modal-footer"> <button id="cancel">取消</button> <button id="sure">确定</button> </footer>
        </div>
    </div>
</body>

</html>

<script>
    var btn = document.getElementById('showModel');
    var close = document.getElementsByClassName('close')[0];
    var sure = document.getElementById('sure');
    var modal = document.getElementById('modal');
    btn.addEventListener('click', function () { 
        modal.style.display = "block"; 
        setTimeout(() =>{
            modal.style.opacity = 1; 
        });
    });
    close.addEventListener('click', function () { 
        modal.style.opacity = 0; 
        setTimeout(() =>{
            modal.style.display = "none";
        },200);
    });
    sure.addEventListener('click', function () { 
        modal.style.opacity = 0; 
        setTimeout(() =>{
            modal.style.display = "none";
        },200);
    });
</script>

参考链接

Mobile

移动端轮播

更新中。。。。

待整理资源

swiper

https://3.swiper.com.cn/api/index.html
https://3.swiper.com.cn/download/index.html

原生实现轮播

https://www.mscto.com/javascript/199972.html
https://www.php.cn/js-tutorial-414174.html
https://blog.csdn.net/lyclyc_/article/details/108043006
https://blog.csdn.net/qq_40126542/article/details/85679229
https://www.cnblogs.com/zcy9838/p/12982574.html
https://blog.csdn.net/qq_43477721/article/details/109104161
https://blog.csdn.net/q3254421/article/details/86561837
https://blog.csdn.net/weixin_30733003/article/details/98087463
https://www.zhangshengrong.com/p/281om3vJNw/
https://www.jb51.net/article/131918.htm
https://www.jb51.net/article/153933.htm

微笑边缘的金元宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生JS+CSS+HTML实现弹框 & 轮播

PC端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模态框实现</title> <style> h4 { margin-left: 20px; } p { text-align: center;
复制链接

扫一扫

专栏目录