元素的几种方法的对比,弹出框插件

时间:2019-12-07 23:00来源:关于计算机
CSS“隐蔽”成分的二种方法的自己检查自纠 2016/02/16 · CSS ·隐藏 初藳出处:狼狼的蓝胖子(@狼狼的蓝胖子)    一说到CSS遮掩成分,笔者想大部分小同伙们都会想到的率先种方法正是

CSS“隐蔽”成分的二种方法的自己检查自纠

2016/02/16 · CSS · 隐藏

初藳出处: 狼狼的蓝胖子(@狼狼的蓝胖子)   

一说到CSS遮掩成分,笔者想大部分小同伙们都会想到的率先种方法正是设置display为none。那是Infiniti人所了解也是最常用的章程。小编百依百顺还应该有不菲人想到利用安装visibility为hidden来隐敝成分,这种方法也是常用的艺术,而且也许有为数不菲人掌握两岸的两样。除了那三种艺术,本文还总结了有的相比较一时用的方法,比较了那二种“隐敝”成分方法的区分和优劣点,招待大家调换!!

基于jquery和dot.js弹出框插件,宽容IE6+等别的浏览器。

两种办法的简易介绍

首先大家分别来讲聊起底有哪两种隐蔽成分的点子,有黄金时代部分办法是大名鼎鼎的,还会有生龙活虎对终归风华正茂种本事。

观念:弹出框成分插入body节点中,并在页面垂直居中显得(fixed定位),触发分明和停业事件绑定。

display:none

设置成分的display为none是最常用的隐讳成分的点子。

CSS

.hide { display:none; }

1
2
3
.hide {
     display:none;
}

将成分设置为display:none后,成分在页面中将干净衰亡,成分本来占领的长空就能够被别的因素占有,相当于说它会促成浏览器的重排和重绘。

介意ie6包括多少个难点:
生机勃勃、select、flash不可能遮罩,采纳iframe。
二、fixed属性采取滚动时再一次总结中度或在样式中使用表明式总结expression。

visibility:hidden

安装成分的visibility为hidden也是生机勃勃种常用的遮掩成分的点子,和display:none的分别在于,成分在页面消失后,其占用的空间依旧会保留着,所以它只会引致浏览珍视绘而不会重排。

.hidden{ visibility:hidden }

1
2
3
.hidden{
     visibility:hidden
}

visibility:hidden适用于那贰个成分遮盖后不指望页面构造会产生变化的气象

源码分析:
1、creatHtml:接收doT.js初步化成分增添到body中;
2、show:设置宽度,中度,居中展现;
3、events:为关闭和规定绑定事件;
4、removeCallback:移出成分节点,如有实践回调方法;
5、ie6fixed:ie6中fixed的宽容性处理。

opacity:0

opacity属性小编低声下气咱们都明白表示成分的光滑度,而将成分的发光度设置为0后,在我们客户眼中,成分也是掩盖的,那终归豆蔻年华种遮盖元素的法子。

.transparent { opacity:0; }

1
2
3
.transparent {
     opacity:0;
}

这种方法和visibility:hidden的叁个协同点是因素隐藏后依然吞并着空间,但大家都知情,设置光滑度为0后,成分只是隐身了,它还是存在页面中。

参数使用表达:

设置height,width等盒模型属性为0

那是本身总括的大器晚成种相比较奇葩的本事,轻松说正是将成分的margin,border,padding,height和width等影响因素盒模型的习性设置成0,假诺成分内有子成分或内容,还相应安装其overflow:hidden来隐敝其子成分,那算是生机勃勃种奇伎淫巧。

.hiddenBox { margin:0; border:0; padding:0; height:0; width:0; overflow:hidden; }

1
2
3
4
5
6
7
8
.hiddenBox {
     margin:0;
     border:0;
     padding:0;
     height:0;
     width:0;
     overflow:hidden;
}

这种格局既不实用,也大概存在着着一些标题。但一生我们用到的局地页面效果大概就是运用这种措施来实现的,比方jquery的slideUp动漫,它正是设置成分的overflow:hidden后,接着通过计时器,不断地设置成分的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,进而达到slideUp的效能。

width:定义弹出框的宽度,私下认可值是400。
height:定义弹出框的万丈,私下认可值是100.
title:定义弹出框的标题,暗中同意值是空。
html:定义弹出框的剧情,默许值是空。
type:定义弹出框的门类,暗中认可值是default,别的conform和alert。
closed: 标题栏中的关闭开关,回调方法,默感觉null。
conform:包蕴name指按键的名目,暗中同意值为鲜明,callback回调方法,私下认可值为null。
cancel:包括name指按键的称谓,私下认可值为收回,callback回调方法,默许值为null。
备考:假如选择conform或alert时,不设置type类型是不起成效。

要素隐瞒后的事件响应

若果被隐形的因素绑定了某一件事件,大家实行了有关操作后,这一个事件是还是不是会被响应并实行呢,看看下面包车型客车代码:

JavaScript

<style> div { width: 100px; height: 100px; background: red; margin: 15px; padding: 10px; border: 5px solid green; display: inline-block; overflow: hidden; } .none { display: none; } .hidden { visibility: hidden; } .opacity0 { opacity: 0; } .height0 { height: 0; } </style> <div class="none"></div> <div class="hidden"></div> <div class="opacity0"></div> <div class="height0">aa</div> <script src="/Scripts/jquery-1.10.2.min.js"></script> <script> $(".none").on("click", function () { console.log("none clicked"); }) $(".hidden").on("click", function () { console.log("hidden clicked"); }) $(".opacity0").on("click", function () { console.log("opacity0 clicked"); }) $(".height0").on("click", function () { console.log("height0 clicked"); }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin: 15px;
        padding: 10px;
        border: 5px solid green;
        display: inline-block;
        overflow: hidden;
    }
    .none { display: none; }
    .hidden { visibility: hidden; }
    .opacity0 { opacity: 0; }
    .height0 { height: 0; }  
</style>  
 
<div class="none"></div>
<div class="hidden"></div>
<div class="opacity0"></div>
<div class="height0">aa</div>  
 
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(".none").on("click", function () {
        console.log("none clicked");
    })
    $(".hidden").on("click", function () {
        console.log("hidden clicked");
    })
    $(".opacity0").on("click", function () {
        console.log("opacity0 clicked");
    })
    $(".height0").on("click", function () {
        console.log("height0 clicked");
    })
</script>

这段代码将各样隐蔽成分的法子分别展现出来,然后绑定其点击事件,经过测量检验,重要有上边包车型地铁结论:

1、display:none:成分彻底消失,很醒目不会触发其点击事件
2、visibility:hidden:不能触发其点击事件,有大器晚成种说法是display:none是因素看不见摸不着,而visibility:hidden是看不见摸得着,这种说法是不正确的,设置成分的visibility后不能够触发点击事件,表达这种艺术成分也是冰释了,只是仍然攻克着页面空间。
3、opacity:0:能够触发点击事件,原因也相当的粗略,设置成分发光度为0后,成分只是对峙于人眼不设有而已,对浏览器来讲,它依旧存在的,所以能够触发点击事件
4、height:0:将成分的万丈设置为0,况兼安装overflow:hidden。使用这种方法来遮掩成分,是或不是足以触发事件要依附现实的景况来深入分析。固然成分设置了border,padding等性格不为0,很明显,页面上可能能看出这些因素的,触发成分的点击事件完全未有毛病。假使全勤质量都安装为0,很名扬四海,这几个因素相当于消失了,即不可能触发点击事件。

不过这个结论真的正确吗?
大家在地方的代码中丰硕那样一句代码:

1 $(".none").click();

1
1 $(".none").click();

结果发现,触发了click事件,也正是经过JS能够触发棉被服装置为display:none的成分的平地风波。
由以前边不能够触发点击事件的实在原因是鼠标不恐怕真正接触到被设置成隐瞒的要素!!!

座落页面底部,作为公用部分:
图片 1

CSS3 transition对那二种办法的熏陶

CSS3提供的transition十分大地进步了网页动漫的编写制定,但并非每后生可畏种CSS属性都足以经过transition来进展动漫的。大家改革代码如下:

JavaScript

<style> div { width: 100px; height: 100px; background: red; margin: 15px; padding: 10px; border: 5px solid green; display: inline-block; overflow: hidden; transition: all linear 2s; } </style> <div class="none"></div> <div class="hidden"></div> <div class="opacity0"></div> <div class="height0">aa</div> <script src="/Scripts/jquery-1.10.2.min.js"></script> <script> $(".none").on("click", function () { console.log("none clicked"); $(this).css("display", "none"); }) $(".hidden").on("click", function () { console.log("hidden clicked"); $(this).css("visibility", "hidden"); }) $(".opacity0").on("click", function () { console.log("opacity0 clicked"); $(this).css("opacity", 0); }) $(".height0").on("click", function () { console.log("height0 clicked"); $(this).css({ "height": 0, }); }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin: 15px;
        padding: 10px;
        border: 5px solid green;
        display: inline-block;
        overflow: hidden;
        transition: all linear 2s;  
    }
</style>  
 
<div class="none"></div>
<div class="hidden"></div>
<div class="opacity0"></div>
<div class="height0">aa</div>  
 
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(".none").on("click", function () {
    console.log("none clicked");
    $(this).css("display", "none");
})
$(".hidden").on("click", function () {
    console.log("hidden clicked");
    $(this).css("visibility", "hidden");
})
$(".opacity0").on("click", function () {
    console.log("opacity0 clicked");
    $(this).css("opacity", 0);
})
$(".height0").on("click", function () {
    console.log("height0 clicked");
    $(this).css({
        "height": 0,
    });
})
</script>

经过测量试验,能够看见:
1、display:none:完全不受transition属性的熏陶,元素马上消失
2、visibility:hidden:成分消失的时日跟transition属性设置的日子同黄金年代,但是从未动画效果
3、opacity和height等质量能够进行健康的卡通效果

倘若大家要通过CSS3来做一个脱离的卡通效果,应该如下:

.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; } .fadeOut:hover { visibility: hidden; opacity: 0; }

1
2
.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
     .fadeOut:hover { visibility: hidden; opacity: 0; }

有道是同期安装成分的visibility和opacity属性。

动用方法:

小结表达

本文化总同盟结表达了“隐蔽”成分的三种办法,当中最常用的要么display:none和visibility:hidden。其余的办法只可以算是华而不实,并不引进应用它们来隐蔽成分,它们的真正用项应该不在隐蔽成分,而是经过询问那么些情势的性状,挖挖出其确实的利用境况。迎接大家调换!!

$.Dialog.init({
    height: 180,
    title: "弹出框",
    html: "亲,默认弹出框哦",
    closed: function() {
        alert("关闭");
    }
});

 补充

来自己评价论区小同伙们补充的本领:

1、设置成分的position与left,top,bottom,right等,将成分移出至显示屏外

2、设置成分的position与z-index,将z-index设置成尽量小的负数

2 赞 3 收藏 评论

图片 2

github地址:https://github.com/benpaobenpao/dialog

DEMO:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>dialog弹出框benpaobenpao</title> <style> *{margin:0px;padding: 0px;} .clearfix{*zoom:1;} .clearfix:after{content:"020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;} .dialogbg{display:block; *zoom:1; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; opacity: 0.35;filter:alpha(opacity=30); background: #ccc;z-index: 9999;} .dialogbox{position: fixed;_position: absolute;-webkit-box-shadow: 0px 0px 6px #999;border: 1px solid #ccc;box-shadow: 0px 0px 3px #999;border-radius: 6px; z-index: 99999;left: 50%;top: 50%;background: #f5fffa;overflow: hidden;} .dialogboxrunstart{-webkit-transform: scale(0px,0px);-webkit-transition:all 0.2s ease-in-out;-moz-transform: scale(0px,0px);-moz-transition:all 0.2s ease-in-out;-ms-transform: scale(0px,0px);-ms-transition:all 0.2s ease-in-out;-o-transform: scale(0px,0px);-o-transition:all 0.2s ease-in-out;transform: scale(0px,0px);transition:all 0.2s ease-in-out;} .dialogtit{position: relative;height: 30px; line-height: 30px; overflow: hidden;padding: 0px 10px;border-bottom: 1px solid #274863;font-size: 16px;background: #4682b4;} .dialogclosed{position: absolute;right: 10px;color: #fff;font-weight: 700;font-size: 20px;cursor: pointer;} .dialogclosed:hover{color: #f00;} .dialogtxt{color: #fff;font-weight: 700;margin-right: 20px;} .dialogmain{padding: 10px 20px 10px 20px;} .dialogBtns{text-align: center;padding-top: 5px;} .dialogconform,.dialogcancel{display: inline-block;*display: inline;*zoom:1;padding: 0px 10px;height: 24px;line-height: 24px;color: #fff;font-size: 12px;border-radius: 4px;background: #005eac;border-width: 1px;border-style: solid;border-color: #b8d4e8 #124680 #124680 #b8d4e8;cursor: pointer;} .dialogcancel{margin-left: 10px;} .dialogconform:hover,.dialogcancel:hover{background: #0000ff;} </style> <script src="; <script src="; <style> body{height: 1500px;} .main{width: 960px; margin: 60px auto 0px; } .main .btn{width: 100px; height: 30px; line-height: 30px; text-align: center; cursor: pointer;} .mtable{ height: 100px; overflow-y: auto;} .mtable table{width: 100%; text-align: center;} .mtable table th, .mtable table td{padding:10px 0px;} </style> </head> <body> <div class="main"> <div> <img src="" /> <select><option>one</option><option>two</option></select> 弹出框插件测量检验。。。 </div> <div> 点击测验: <input class="btn" id="btndef" type="button" value="default" /> <input class="btn" id="btnconf" type="button" value="confirm" /> <input class="btn" id="btnal" type="button" value="alert" /> <p>使用conform、alert必需制订其type类型,type暗中同意值是default。</p> </div> </div> <script id="arrtmpl" type="text/x-dot-template"> <div class="mtable"> <table > <thead> <tr> <th>第黄金年代项</th> <th>第二项</th> <th>第三项</th> </tr> </thead> <tbody> {{~it.array:value:index }} <tr> <td>{{= value.one }}</td><td>{{= value.two }}</td><td>{{= value.three }}</td> </tr> {{~}} </tbody> </table> </div> </script> <script id="dialogtmpl" type="text/x-dot-template"> {{? it.isIE6===false }} <div id="dialogbg" class="dialogbg"></div> {{?? }} <iframe id="dialogbg" class="dialogbg"></iframe> {{?}} <div id="dialogbox" class="dialogbox"> <div class="dialogcont"> <div class="dialogtit clearfix"> <a class="dialogclosed" title="关闭">⊗</a> <div class="dialogtxt">{{=it.title}}</div> </div> <div class="dialogmain">{{=it.html}}</div> {{? it.type === "conform"}} <div class="dialogBtns"><a class="dialogconform">{{=it.conform.name||"确定"}}</a></div> {{?? it.type === "alert"}} <div class="dialogBtns"><a class="dialogconform">{{=it.conform.name||"确定"}}</a><a class="dialogcancel">{{=it.cancel.name||"取消"}}</a></div> {{?}} </div> </div> </script> <script> (function($) { $.Dialog = { init: function(options) { var _this = this, defaults = { width: "400", height: "100", title: "", html: "", type: "default", // default conform alert closed: null, conform: { name: "确定", callback: null }, cancel: { name: "取消", callback: null } }; options.isIE6 = !! window.ActiveXObject && !window.XMLHttpRequest; _this.options = $.extend({}, defaults, options); _this.creatHtml(); _this.show(); _this.events(); if(_this.options.isIE6){ _this.ie6fixed(); } }, creatHtml: function() { var _this = this; var interText = doT.template($("#dialogtmpl")[0].text); $("body").append(interText(_this.options)); }, show: function() { var _this = this; _this.dialogbg = $("#dialogbg"); _this.dialogbox = $("#dialogbox"); _this.dialogbg.css({ "height": $(document).height() }); _this.dialogbox.css({ "margin-top": (-_this.options.height / 2) + "px", "margin-left": (-_this.options.width / 2) + "px", "width": _this.options.width + "px", "height": _this.options.height + "px" }); _this.dialogbox.addClass("dialogboxrunstart"); }, events: function() { var _this = this; _this.dialogclosed = _this.dialogbox.find(".dialogclosed"); _this.dialogconform = _this.dialogbox.find(".dialogconform"); _this.dialogcancel = _this.dialogbox.find(".dialogcancel"); _this.dialogclosed.on("click", function() { _this.removeCallback(_this.options.closed); }); _this.dialogconform.on("click", function() { _this.removeCallback(_this.options.conform.callback); }); _this.dialogcancel.on("click", function() { _this.removeCallback(_this.options.cancel.callback); }); }, removeCallback: function(call) { var _this = this; _this.dialogbg.remove(); _this.dialogbox.remove(); !! call && call(); }, ie6fixed: function() { var _this = this; $(window).scroll(function() { _this.dialogbox.css({ "top": (($(window).height() - _this.options.height) / 2 + $(document).scrollTop()) + "px" }); }); } } })(jQuery); </script> <script> (function($) { $("#btndef"卡塔尔(قطر‎.click(function(卡塔尔(قطر‎ { $.Dialog.init({ height: 180, title: "弹出框", html: "亲,私下认可弹出框哦", closed: function(卡塔尔(قطر‎ { alert("关闭"卡塔尔(英语:State of Qatar); } }卡塔尔(英语:State of Qatar); }卡塔尔; $("#btnconf"卡塔尔(英语:State of Qatar).click(function(卡塔尔 { $.Dialog.init({ height: 100, html: "", type: "conform", conform: { name: "确认按键哦哦哦哦" } }卡塔尔国; }卡塔尔(英语:State of Qatar); $("#btnal").click(function() { var arr = { "array": [{ "one": "1", "two": "2", "three": "3" }, { "one": "11", "two": "22", "three": "33" }, { "one": "111", "two": "222", "three": "333" }, { "one": "1111", "two": "2222", "three": "3333" }, { "one": "11111", "two": "22222", "three": "33333" }, { "one": "111111", "two": "222222", "three": "333333" }] }; var interText = doT.template($("#arrtmpl")[0].text); var html = interText(arr); $.Dialog.init({ height: 190, html: html, type: "alert", conform: { callback: function() { alert("确定"); } }, cancel: { callback: function() { alert("取消"); } } }); }); })(jQuery); </script> </body> </html>

运营代码

编辑:关于计算机 本文来源:元素的几种方法的对比,弹出框插件

关键词: