jq弹框 （1）内容自适应宽度 2（内容框显示，几秒后自动消失）

时间：2023-02-05 08:19:42
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

<div class="btn">点击</div>

<div class="aa" style="display:none;width:200px;height:20px;margin: 20px auto;background:green;"></div>

</body>

<script src="../js/jquery-1.11.3.min.js"></script>

<script>

    var timer=null;

    $(".btn").on("click",function(){

        $(".aa").fadeIn();

        timer=window.setTimeout(function(){

            clearTimeout(timer);

            $(".aa").fadeOut();

        },5000)

    })

</script>

</html>

点击显示内容框，5秒后自动消失

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

            box-sizing: border-box;

        }

        body{

            height:2100px;

        }

        .msg-layer-bg{

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width:100%;

            height:100%;

            background:rgba(0,0,0,.5);

        }

        .msg-layer{

            display: none;

            position: fixed;

            padding:5px 10px;

            border: 1px solid #ccc;

            background:#fff;

        }

        .msg-layer h5{

            font-size: 16px;

            padding:5px;

        }

        .msg-con{

            font-size:13px;

            padding: 10px;

        }

        .msg-close{

            position: absolute;

            right:5px;

            top:5px;

            font-size:18px;

            color:red;

            cursor: pointer;

        }

    </style>

</head>

<body>

<div class="btn">点击</div>

<div class="msg-layer-bg"></div>

<div class="msg-layer">

    <h5>我是标题</h5>

    <div class="msg-con">

        我是内容

    </div>

    <div class="msg-close">&times;</div>

</div>

</body>

<script src="../js/jquery-1.11.3.min.js"></script>

<script>

    $(function(){

        function msg_layer(tit,con){

            var _layer=$(".msg-layer");

            _layer.css("display","block");

            _layer.find("h5").html(tit);

            _layer.find($(".msg-con")).html(con);

            var winH=$(window).height(),winW=$(window).width(),_layerW=_layer.outerWidth(),_layerH=_layer.outerHeight();

            $(".msg-layer-bg").css({"display":"block"});

            _layer.css({"left":winW/2-_layerW/2,"top":winH/2-_layerH/2});

        }

        $(".btn").on("click",function(){

            msg_layer("标题，，，","内容内")

        });

        $(".msg-close").on("click",function(){

            $(".msg-layer-bg,.msg-layer").css({"display":"none"});

        })

    })

</script>

</html>

相关文章