zoukankan      html  css  js  c++  java
  • 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;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>
  • 相关阅读:
    让开发效率“飞起”的VS Code 插件
    转-webpack学习笔记--整体配置结构
    十二、vue中watch原理
    十一、vue生命周期诠释--带图
    十、vue mixins 的用法
    八、Web移动端Fixed布局的解决方案
    七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面
    六、vue如何缓存页面
    五、vue常用UI组件
    vue组件递归
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/7063828.html
Copyright © 2011-2022 走看看