jQuery实现弹窗效果

87 阅读 0 评论 58 点赞

我是靠谱客的博主英俊耳机，最近开发中收集的这篇文章主要介绍jQuery实现弹窗效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

点击弹窗按钮，弹出如下界面，点击取消和右上角的X则取消：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src='../js/jquery-1.12.4.js'></script>
    <script>
    $(function(){
        $('#btn').click(function(){
            //显示弹窗的主界面
            $('.pop_main').show()
            //设置animate动画初始值
            $('.pop_con').css({'top':0,'opacity':0})
            $('.pop_con').animate({'top':'50%','opacity':1})
        })

        //取消按钮和关闭按钮添加事件
        $('.cancel,.pop_title a').click(function(){
            $('.pop_con').animate({'top':0,'opacity':0},function(){
                //隐藏弹窗的主界面
                $('.pop_main').hide()
            })
        })
    })
    </script>
</head>
<body>
    <input type="button" value="弹出弹框" id="btn">
    <div class="pop_main">
        <div class="pop_con">
            <div class="pop_title">
                <h3>系统提示</h3>
                <a href="#">×</a>
            </div>
            <div class="pop_detail">
                <p class="pop_text">亲！确定要这么做吗？</p>
            </div>
            <div class="pop_footer">
                <input type="button" value="取 消" class="cancel">
                <input type="button" value="确 定" class="confirm">                
            </div>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>