CSS+JQUERY实现遮盖层效果

最新推荐文章于 2023-10-01 16:52:41 发布

码工码工

最新推荐文章于 2023-10-01 16:52:41 发布

阅读量4.6k

点赞数

分类专栏： HTML&amp;amp;CSS mysql jquery 文章标签： jquery css javascript function input button

本文链接：https://blog.csdn.net/kevoo/article/details/4084119

版权

mysql 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML&amp;CSS

1 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

欢迎访问我的个人博客:kevoo.org

昨天研究了下遮盖层，最后用js(Jquery)+css实现了，但不是那种动态的，从页面中间由小至全屏的弹出的效果，而是直接显示出遮盖层。做的时候同时考虑了多浏览器的支持（IE,FF）。很简单，现在把代码贴出来，与大家共同学习：

-------------------------------<<main.html>>------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GB2312" />
<script src="jquery-1.2.3.pack.js" type="text/javascript" language="javascript"></script>
<script src="zhegai.js" type="text/javascript" language="javascript"></script>
<title>遮盖层效果演示</title>
<style>
#overlay{
   background: #303030;
   opacity: 0.50;
   filter:Alpha(opacity=50);
   display: none;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 100;
}
#tishi{
margin-left:auto;
margin-right:auto;
border:2px solid #FFFFFF;
font-size:12px;
font-family: "宋体";
color:#990000;
padding-top:20px;
width:400px;
height:200px;
position:absolute;
z-index:110;
display:none;
background:#e7e7e7;
left:35%;
top:20%;
opacity:0.85;
filter:Alpha(opacity=85);
}
</style>
</head>

--------------------------------<<zhegai.js>>---------------------------------------------------------------

$(document).ready(function (){

$("#zg").click(function() {
document.getElementById("overlay").style.display="block";
document.getElementById("tishi").style.display="block";
});

$("#ok").click(function () {
document.getElementById("overlay").style.display="none";
document.getElementById("tishi").style.display="none";
});

});

以上就是全部代码了，在使用的时候别忘了加上jquery的js文件，当然完全可以自己用js实现的。

没有js的，可以从我这里下载。

码工码工

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
CSS+JQUERY实现遮盖层效果

欢迎访问我的个人博客:kevoo.org昨天研究了下遮盖层，最后用js(Jquery)+css实现了，但不是那种动态的，从页面中间由小至全屏的弹出的效果，而是直接显示出遮盖层。做的时候同时考虑了多浏览器的支持（IE,FF）。很简单，现在把代码贴出来，与大家共同学习：-------------------------------<<main.html>&g...
复制链接

扫一扫