原生js代码点击文字或小图弹出层_点按钮关闭弹出层特效



203 811 271



特效描述:点击文字弹出层 按钮关闭弹出层 弹出层特效,点击小图,弹出带关闭大图

代码结构

1. HTML代码

<!--首先设置一个层:-->
<div id="pop" class="pop" style="display:none">
  <div class="pop_head"><a class="close" href="javascript:void(0);" onclick="hide()"></a></div>
  <div class="pop_body">谢谢光临……</div>
</div>
<!--弹出层的按钮:--> 
<a href="javascript:void(0);" onclick="show();"><img src="btn.jpg" width="100" height="100" alt="" /></a> 
<script type="text/javascript"> 
var EX = {
	addEvent:function(k,v){
		var me = this;
		if(me.addEventListener)
		me.addEventListener(k, v, false);
		else if(me.attachEvent)
		me.attachEvent("on" + k, v);
		else
		me["on" + k] = v;
	},
	removeEvent:function(k,v){
		var me = this;
		if(me.removeEventListener)
		me.removeEventListener(k, v, false);
		else if(me.detachEvent)
		me.detachEvent("on" + k, v);
		else
		me["on" + k] = null;
	},
	stop:function(evt){
		evt = evt || window.event;
		evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
	}
};
document.getElementById('pop').onclick = EX.stop;
var url = '#'; 
function show(){ 
	var o = document.getElementById('pop'); 
	o.style.display = ""; 
	setTimeout(function(){
		EX.addEvent.call(document,'click',hide);
	});
}
function hide(){ 
	var o = document.getElementById('pop'); 
	o.style.display = "none"; 
	EX.removeEvent.call(document,'click',hide);
} 
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口提示框 提示框/弹出层

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到