<!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. &&和||的操作符妙用(javascript)

    前言 &&逻辑与和||逻辑或,它们既可以返回一个布尔值,又可以返回指定操作数的值,这个值是非布尔型的. MDN api参考 Section1 布尔运算 首先,我们明确一下基础知识. 能 ...

  2. 使用nodeJs在本地搭建最简单的服务

    在搭建web服务器之前,需要先安装node.js 安装后node.js,接下来就需要安装http的镜像文件 一:本机安装软件 下载最新的NodeJs,进行安装.一直点击下一步就可以了.然后就可以查看安 ...

  3. Android中自定义弹出PopupWindow后返回按键失效的问题解决

    PopupWindow出现之后,默认的是所有的操作都无效的,除了HOME键.而且是可以操作后面的界面的.想要锁定后面的界面,很简单,只需要让PopupWindow是focusable的:popupWi ...

  4. HotSpot 虚拟机中对象的创建过程

  5. lambda 表达式学习笔记

    在Java中传递一个代码段并不容易,不能直接传递代码段.Java是一个面向对象语言,所以必须构造一个对象,这个对象的类需要一个方法能包含所需的代码.lambda的出现有效的解决这个问题,让代码变得更加 ...

  6. Inter网关做Team的方法

    1.到Inter官网上找到相关驱动程序 2.在安装过程中,要求勾选高级网络 3.驱动安装完成后,打开网卡的属性窗口,在“分组”选项卡中,勾中,并输入Team名称 4.选择需要做Team的网卡 5.选择 ...

  7. 原型链继承中的prototype、__proto__和constructor的关系

    前不久写了有关原型链中prototype.__proto__和constructor的关系的理解,这篇文章说说在原型链继承中的prototype.__proto__和constructor的关系. 通 ...

  8. Bookmarklet编写指南

    作者: 阮一峰 日期: 2011年6月11日 前一段日子,我写了两个Bookmarklet----"短网址生成"和"短网址还原". 它们用起来很方便,除了我本人 ...

  9. Ueditor更改编辑框样式

    1.在ueditor.all.min.js文件中查找“ueditor.css”,找到位置后更改css文件,或在原文件中更改

  10. Web开发须知的浏览器内幕 缓存与存储篇（2）

    本文禁止转载,由UC浏览器内部出品. 3. HTTP Cache 综述 HTTP Cache是完全按照IETF规范实现的,最新的RFC规范地址是 https://tools.ietf.org/html ...