酷炫弹窗效果

最新推荐文章于 2023-08-14 17:18:31 发布

A D H

最新推荐文章于 2023-08-14 17:18:31 发布

阅读量898

点赞数 5

文章标签： css js jquery html css3

本文链接：https://blog.csdn.net/ADH100899/article/details/108359606

版权

酷炫弹窗效果

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗效果</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #my_button{
            width: 100px;
            height: 50px;
        }
    </style>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <button id="my_button">弹窗</button>
    <div class="filterbg"></div>
    <div class="popup">
        <a href="javascript:;" class="popupClose"></a>
        <div class="summary">
        </div>
    </div>
</body>
</html>

css

filterbg {
    width: 100%;
    height: 100%;
    background: rgba(30, 182, 254, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
    display: none;
}
.popup {
    width: 0;
    height: 0;
    background: #061f3e;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    border-radius: 8px;
    display: none;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.popup .popupClose {
    display: block;
    width: 44px;
    height: 44px;
    background: url(../img/s_ico3.png);
    background-size: 100 100%;
    position: absolute;
    top: -22px;
    right: -22px;
    display: none;
    transition: 0.3s;
}

.popup .popupClose:hover {
    transform: rotate(180deg);
}

		$(()=>{
	    $('#my_button').on('click', function () {
	        $('.filterbg').show();
	        $('.popup').show();
	        $('.popup').width('3px');
	        $('.popup').animate({
	            height: '90%'
	        }, 400, function () {
	            $('.popup').animate({
	                width: '95%'
	            }, 400);
	        });
	        setTimeout(summaryShow, 800);
	    });
	    function summaryShow() {
	        $('.popupClose').css('display', 'block');
	        $('.summary').show();
	    };
	    $('.popupClose').on('click', function () {
	        $('.popupClose').css('display', 'none');
	        $('.summary').hide();
	        $('.popup').animate({
	            width: '3px'
	        }, 400, function () {
	            $('.popup').animate({
	                height: 0
	            }, 400);
	        });
	        setTimeout(summaryHide, 800);
	    });
	    function summaryHide() {
	        $('.filterbg').hide();
	        $('.popup').hide();
	        $('.popup').width(0);
	    };
	})