<!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. ViewPager（视图滑动切换工具）

    <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.Cons ...

  2. RestTemplate的一个请求过程，mark一下

    来看下RestTemplate中默认的的ResponseErrorHandler: package org.springframework.web.client; import java.io.IOE ...

  3. GIT使用log命令显示中文乱码

    背静: 公司项目使用GIT进行代码同步. 问题: 之前代码提交后,有中文备注,但是在使用git log查看代码历史记录的时候发现显示乱码,如下: 后查询相关资料,现将解决办法总结如下: 1.运行Git ...

  4. java四则运算----前缀、中缀、后缀表达式

    接到一个新需求,需要实现可配置公式,然后按公式实现四则运算. 刚拿到需求,第一反应就是用正则匹配‘(’,‘)’,‘+’,‘-’,‘*’,‘/’,来实现四则运算,感觉不复杂. 然后开始coding.发现 ...

  5. K：单例模式中存在的问题

      对于单例模式的实现,无论其是否具有懒加载的功能,我们的目标是有且仅生成一个对象.但是,实际上,对于单例模式的一般实现,都会存在着以下的两个问题: 序列化攻击: 对于枚举方式实现的单例模式,并不存在 ...

  6. Redis ，Memcached ，Mongodb 对比

    memcached: 1.适合做内存缓存,对可靠性没有要求,不支持持久化:速度快.并发高.2.支持的数据结构单一,只支持Key-value,3.value最大支持1M3.在传统tomcat 部署war ...

  7. drupal7 转化 public:// 为实际url

    file_create_url('public://xxx.png'); // 得到URL drupal_realpath('public://xxx.png'); // 得到系统路径(磁盘路径,如D ...

  8. 使用iview时，页面没了滚动条

    场景:页面中有一个确认按钮,保存后弹框预览在点保存按钮,实现数据提交.提交后回到数据列表页,用this.$router.push('list'),返回后页面无法滚动了. 原因:排查后发现弹框时在bod ...

  9. Vue.js小案例(1)

    数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...

  10. Java设计模式—备忘录模式

    个人感觉备忘录模式是一个比较难的设计模式,备忘录模式就是一个对象的备份模式,提供了一种程序数据的备份方法. 定义如下:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以 ...