<!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. 如鹏网学习笔记（十五）ASP.NET MVC核心基础笔记

    一.ASP.Net MVC简介 1,什么是ASP.NET MVC? HttpHandler是ASP.net的底层机制,如果直接使用HttpHandler进行开发难度比较大.工作量大.因此提供了ASP. ...

  2. 全面了解HTTP和HTTPS

    序言 Http和Https属于计算机网络范畴,但作为开发人员,不管是后台开发或是前台开发,都很有必要掌握它们. 在学习Http和Https的过程中,主要是参考了阮一峰老师的博客,讲的很全面,并且通俗易 ...

  3. Java CountDownLatch解析（下）

    写在前面的话 在上一篇CountDownLatch解析中,我们了解了CountDownLatch的简介.CountDownLatch实用场景.CountDownLatch实现原理中的await()方法 ...

  4. HDU 1875（最小生成树）

    因为是全连接图,所以也可以用最小生成树 这道题给边加了一个限制条件,(10<=x<=1000),所以可能不能全连通,需要判断 #include <cstdio> #includ ...

  5. 解决：IDEA 中 new Java Class 怎么没了？

    前言:写代码时遇到的问题,所以记录下来.我的包名为“interface”,只有这个包及包下的文件不能建java文件. 问题 解决方式(对于普通包名) 点击应用,ok就可以了. 解决方式(对于包名为“i ...

  6. 使用admin lte 碰到访问Google字体的问题

    下载了admin lte 的模板,运行的时候,发现很慢,看了一下console,发现adminlte.css里有import google的字体文件,众所周知的原因,无法访问,所以网页很慢,没办法,只 ...

  7. Hello,world的几种写法！

    这是我的第一篇文章!开个玩笑~~“你知道回字的四种写法吗”? printf("Hello,world!"); cout<<"Hello,world!" ...

  8. Android LinkedList和ArrayList的区别

    LinkedeList和ArrayList都实现了List接口,但是它们的工作原理却不一样.它们之间最主要的区别在于ArrayList是可改变大小的数组,而LinkedList是双向链接串列(doub ...

  9. PHP进阶知识总结

    周末梳理了下这段时间看书的一些知识点,进步的过程不仅要实践,还要安排多看书.思考.总结. 只针对知识点进行了罗列和简单说明,很多细节还未整理好,待后面再专门详细写. 基础易忽略概念 PHP是一个支持面 ...

  10. ORM注意点

    add:是追加 set:是覆盖