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

 
<!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>

 

posted @ 2017-06-22 11:01  dongxiaolei  阅读(378)  评论(0)  编辑  收藏  举报