Jquery弹出层组件

Jquery 496849654@qq.com 4年前 (2020-06-16) 887次浏览 0个评论

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery弹出层组件</title>
<style>
body { margin:0; height:2000px;}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($){
	$.fn.extend({
		"alertbox":function(options){
			var defaults={
				alertTag:"<div>",
				width:500,
				height:500,
				minbg:true, //是否显示大背景层
				center:true, //是否上下左右居中
				ominbgcolor:"#000",
				ominbgopacity:0.5,
				ominbgzIndex:1,
				dubblebgclick:true	
			};
			var opts=$.extend(defaults,options);
			var alertBox=$(opts.alertTag);
			alertBox.css({width:opts.width+"px",height:opts.height+"px",border:"1px solid red",zIndex:opts.ominbgzIndex+1,backgroundColor:"#fff"});
			if(opts.center){
				alertBox.css({position:"absolute",left:"50%", top:"50%", marginLeft:-opts.width/2+"px",marginTop:-opts.height/2+"px",})	
			}
			$("html,body").css({height:"100%",overflow:"hidden"})
			alertBox.appendTo($("document,body"));
			if(opts.minbg){
				var minBg=$("<div>");
				var height;
				if($("body").height()>$(window).height()){
					height=$("body").height()
					}
				else
				{
					height=$(window).height()	
				}
				minBg.css({width:"100%" , height:height+"px", position:"absolute", top:0, left:0,background:opts.ominbgcolor,opacity:opts.ominbgopacity,zIndex:opts.ominbgzIndex})
				$(window).resize(function(){
					if($("body").height()>$(window).height()){
					height=$("body").height()
					}
					else
					{
						height=$(window).height()	
					}	
					minBg.css({height:height+"px"})
				})
				minBg.appendTo($("document,body"));	
				if(opts.dubblebgclick){
					minBg.dblclick(function(){
						alertBox.remove();
						$(this).remove();
						return false;
					})	
				}
			}
			
		
		}	
	})	
})(jQuery)
</script>
</head>

<body>
<a id="j_tanchu1" href="#">弹出</a>

<script>
$(function(){
	$("#j_tanchu1").click(function(){
		$().alertbox({width:100, height:200 ,dubblebgclick:false});	
	})
})
</script>
<div id="box"></div>
</body>
</html>


css315 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Jquery弹出层组件
喜欢 (3)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到