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

jq弹框 （1）内容自适应宽度 2（内容框显示，几秒后自动消失）的更多相关文章

  1. js弹框3秒后自动消失

    开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...

  2. axure如何实现提示框3s后自动消失

    本示例基于axure8 实现 1.先做两个元件,一个按钮,一个提示框 2.将弹框“发布成功提示”设置为,页面载入时隐藏,这样预览页面时,该弹框是隐藏状态 3.给按钮添加交互样式,如下: 4.预览,点击 ...

  3. ASP.NET div信息提示框显示几秒后隐藏

    今天在旧系统中,用户要求,要把一个javascript alert的信息提示,改为Div tag来显示,它在显示时,仅显示几秒,然后隐藏,这样无需用户去点击alert信息框的确定或是关闭铵钮. 下面I ...

  4. flex使内部内容自适应宽度

  5. table内容超出宽度时隐藏并显示省略标记

    HTML中,一个表格,要达到二个条件: 1.内容多了不自动换行: 2.固定单元格宽度.如果内容超出,则隐藏: 如 果在IE下,只是写成<table style="table-layou ...

  6. td里的内容宽度自适应 及 鼠标放上显示标题div title

    td里的内容自适应宽度, 用 width:100%控制 strRight+="<td bordercolor='#DEDEDE' width='500px' height='50px' ...

  7. JS实现自适应宽度的Tag切换

    效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...

  8. ios-UILabel居中随内容自适应，后面的控件跟在其后

    如图绿蓝框所示,UILabel显示名字,Label框随名字长短而自适应,后面的性别图片跟在其后显示 分两部分:第一部分先布局 //名字 self.nameLab = [[UILabel alloc]i ...

  9. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

随机推荐

  1. 打乱数组——shuffle

    在学习vue移动端音乐项目时,看到一个打乱数组函数,感觉很有意思就记录一下(意外发现:slice是个有趣的知识点) 原理:遍历数组,(let i = 0; i < _arr.length; i+ ...

  2. Uboot流程分析

    1. uboot的配置分析 1).配置入口分析 首先分析配置: 从make mx6dl_sabresd_android_config可知配置项,搜索Makefile: mx6solo_sabresd_ ...

  3. Postgresql 连接更新

    update dbo.m_role_fun a set role_code = b.rsc from (select rsc, fun_code from dbo.m_fun) b where a.f ...

  4. php 数组任意位置插入值

    array_splice() $arr = array('A', 'B', 'C'); $arr2 = 'abc';$t = array_splice($arr, 1, 0, $arr2); prin ...

  5. PictureBox控件

    PictureBox控件可以显示来自位图.图标或者元文件,以及来自增强的元文件.JPEG.GIF文件的图形,如果控件不足以显示整幅图像,则裁剪图像以适应控件的大小. Sizemode 图片的大小方式 ...

  6. AJAX同步问题

    @using ShippingRen.CommonV2.CloudStorage; @using ShippingRen.Api.ServiceModel.PublicDataEntity.Looku ...

  7. 记DateTime.Now.ToString()遇到的一个坑

    最近在编写一个程序中遇到的 程序的简要逻辑就是一个timer控件 1.获取当前时间的短时间,例如 13:15 2.使用获取到的短时间去一个列表中查询是否有匹配的,列表中是一串短时间,类似 {" ...

  8. VS2012 常用配置

    一. 整合svn版本控制 1. 点击此 下载与SVN版本相对应的ankhsvn插件,本人用的是Subversion 1.8 2. 安装ankhsvn插件,打开VS2012,右键任一工程,有显示如下图, ...

  9. K：双栈法求算术表达式的值

    相关介绍:  该算法用于求得一个字符串形式的表达式的结果.例如,计算1+1+(3-1)*3-(21-20)/2所得的表达式的值,该算法利用了两个栈来计算表达式的值,为此,称为双栈法,其实现简单且易于理 ...

  10. js Object 的冻结、密封、扩展的相同以及不同点

    Object.freezed() 冻结 检查函数 Object.isFrozen(obj) Object.seal() 密封   检查函数 Object.isSealed(obj) Object.pr ...