足球游戏_中国足彩网¥体育资讯$

jquery弹出灰色层
来源:易贤网 阅读:1405 次 日期:2014-09-12 11:32:24
温馨提示:易贤网小编为您整理了“jquery弹出灰色层”,方便广大网友查阅!

jquery弹出灰色的提示框,可以在框内写任何东西。通过对层的定位,宽,高,透明度进行更改。来实现层的叠加显示,最终实现弹出灰色提示框.

先看主要代码。

jquery,操作代码:

<script language="javascript" src="jquery.js"></script>

<script language="javascript">

$(function(){

$("img[class='foraspcn']").each(function(index){

$("#showImg").show().css("height",$(document).height());

$("#showImg_content").html("<img src="+$(this).attr("src")+">").show().css({"top":$(window).height()*0.5+$(window).scrollTop()-

$("#showImg_content>img").height()*0.5,"left":$(window).width()*0.5-$("#showImg_content>img").width()*0.5}).click(function(){$("#showImg").hide

();$(this).hide();});

});

});

解释一下代码:选出所有的class=foraspcn的类的图片。点击则执行背景层显示,并设定宽度为自动,高度为文档高度(即从上到下)。

然后,将图片写入到显示层内容。并设置显示层的top left位置,top left分别为文档高度-滚动高度-一半的图像高度,window的宽度-一半的图片宽度。

设置完毕后,添加click事件。点击图片则隐藏两个层。

中间图片层。(这个就根据自己需求来定了)。我用的是图片

<center>

<img src="images/L_ad.jpg" border="0" class="foraspcn" >

<img src="images/L_ad.jpg" border="0" class="foraspcn">

<img src="images/L_ad.jpg" class="foraspcn" border="0" >

</center>

<center>

<img src="images/L_ad.jpg" class="foraspcn">

<img src="images/L_ad.jpg" class="foraspcn">

<img src="images/L_ad.jpg" class="foraspcn">

</center>

<center>

<img src="images/L_ad.jpg" class="foraspcn">

<img src="images/L_ad.jpg" class="foraspcn">

<img src="images/L_ad.jpg" class="foraspcn">

</center>

//这里是隐藏的层了。通过jquery对隐藏层的操作来实现弹出灰色的层。

第一个层是灰色的背景层

<div style="background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; text-align:center; display:none; width:100%; opacity:0.5;filter: alpha

(opacity=50);-moz-opacity: 0.5;" id="showImg"></div>

第二个层是显示的内容层。

<div style=" position:absolute;width:auto; border:#F00 solid 1px; z-index:100; text-align:center;" id="showImg_content"></div>

看懂弹出灰色层,提示框的内容了么。点击看看下面特效。

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目
易贤网手机网站地址:jquery弹出灰色层
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标