jq弹出层与自动隐藏,屏幕居中显示，弹出层的移动原理

最新推荐文章于 2021-04-15 17:37:45 发布

水月情缘雪飞飞

最新推荐文章于 2021-04-15 17:37:45 发布

阅读量1.4k

点赞数 1

分类专栏： javascript 文章标签： jq 弹出层

本文链接：https://blog.csdn.net/u010861514/article/details/42526795

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<pre name="code" class="javascript"><!-- =====================弹出层实现原理=================== -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="./jquery-1.11.1.min.js"></script>
<style>
*{ margin:0; padding:0;} 
.div{margin:200px auto;width:200px;height:100px;background:#f0f0f0;line-height:100px;text-align:center;}
</style>
</head>
<body>
<button id="btn">点击显示</button>
<button id="bt">点击显示，自动隐藏</button>
</body>
</html>
<script>
// 一 弹出隐藏层。

	$(function(){
		$('#btn').click(function(){
			var color = '#acacac';
			// 设置body 背景色和 插入这个div。也可以让这个div从隐藏状态到显示。
			$('body').css('background',color).append("<div class='div'>插入数据成功</div>");
		});
	});


// 二 弹出隐藏层，1秒后消失。
$(function(){
	$('#bt').click(function(){
		var color = '#acacac';
		// 设置body 背景色和 插入这个div。也可以让这个div从隐藏状态到显示。
		$('body').css('background',color).append("<div class='div'>插入数据成功</div>");
		setTimeout(function(){
			$('body').css('background',''); // 清空背景色
			$('.div').remove(); 	// 删除 插入的那个div
		},1000);
	});
});

</script>




<!-- ========================遮罩层 和 显示框在屏幕正中间显示以及关闭。===================== -->


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<script src="./jquery-1.11.1.min.js"></script>
  <style>
  *{margin:0px;padding:0px;}
.btn{cursor:pointer;}
#spectacle_div{position:absolute;width:1002px;min-height:600px;background:#bcbcbc;display:none;}
.off{min-width:30px;height:20px;float:right;background:#dddddd;cursor:pointer;}
.opacity{ filter:alpha(opacity=30);       /* IE */  -moz-opacity:0.3;              /* 老版Mozilla */ -khtml-opacity:0.3;              /* 老版Safari */  opacity: 0.3;           /* 标准的浏览器*/}
 </style>
 </head>
 <body>
 <center> 
要显示的层和背景的色是两个里面。背景层的透明度改变就是遮罩层。<br>
<button  class="btn">按钮</button>
 </center>

 <div id="spectacle_div"><div class="off">关闭</div> </div>
 </body>
</html>
<script>
div = $('#spectacle_div');
$('.btn').click(function(){
	// 高度在屏幕的正中间。
	var top = ($(window).height() - $(div).height())/2;   
        var left = ($(window).width() - $(div).width())/2;   
        var scrollTop = $(document).scrollTop();   
        var scrollLeft = $(document).scrollLeft();   
	$(div).css({"left":left + scrollLeft  ,"top": top+scrollTop});
	$('center').addClass('opacity');
	$(div).fadeToggle();
});
$('.off').click(function(){
	$('center').removeClass('opacity');
	$(div).fadeToggle();
});

//  div 的移动。
$(div).mousedown(function(event){   
    var offset=$(this).offset();   
    x1=event.clientX-offset.left;   
    y1=event.clientY-offset.top;
    $(this).css('cursor','move');  // 手型按钮
    $(this).mousemove(function(event){   
       $(this).css("left",(event.clientX-x1)+"px");   
        $(this).css("top",(event.clientY-y1)+"px");   
    });
    $(this).mouseup(function(event){ 
        $(this).unbind("mousemove").css('cursor','');   // 恢复正常按钮
    }); 
}); 
</script>

水月情缘雪飞飞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jq弹出层与自动隐藏,屏幕居中显示，弹出层的移动原理

Document*{ margin:0; padding:0;} .div{margin:200px auto;width:200px;height:100px;background:#f0f0f0;line-height:100px;text-align:center;}点击// 一弹出隐藏层。/* $(function(){ $('#btn').click(f
复制链接

扫一扫