googleChrome样式弹窗（各浏览器兼容自适应浏览器宽高）_google浏览器设置最小宽度资源-CSDN文库

共4个文件

png：2个

html：1个

js：1个

html

jquery

需积分: 47 14 浏览量 2016-01-17 09:16:02 上传评论收藏 35KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

googleShadow.zip （4个子文件）

googleShadow

jquery.min.js 93KB

googleStyle_shadowBox.html 2KB

IDR_CLOSE_DIALOG_H.png 214B

IDR_CLOSE_DIALOG.png 139B

<html> <head> <title>goggle样式自适应弹窗</title> <meta charset="UTF-8"> <style type="text/css"> * { padding: 0; margin: 0; } html { height: auto; } body { text-align: center; font-family: "Microsoft YaHei"; z-index: 0; } #screen { width: 100%; height: 100%; background-color: #fff; /* 遮蔽背景关键字换一下试试? */ display: none; z-index: 98; position: absolute; top: 0; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; left: 0; } .shadow { box-shadow: 0 4px 23px 5px #ccc; /* 阴影关键字 */ display: none; background-color: #fff; /* 弹出窗体背景关键字换一下试试? */ } #shadow-box { position: absolute; top: 25%; left: 30%; width: 40%; height: 400px; margin-left: auto; margin-right: auto; z-index: 100; border-radius: 7px; } .close-box { width: 15px; height: 15px; position: absolute; right: 10px; top: 10px; border-radius:10px; } </style> </head> <body> <button id="btn3">阴影弹窗</button><br> chrome、360、火狐、opera、搜狗、ie10以上版本测试通过 ie8无效果 <div id="screen"></div> <div class="shadow" id="shadow-box"> <div class="close-box"> <img class="close" alt="" title="close" src="IDR_CLOSE_DIALOG.png" /> </div> </div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn3").unbind("click"); $("#btn3").bind("click",function(){ //弹窗阴影 $("#shadow-box").fadeToggle("slow"); $("#screen").show(); $(".close").show(); }); $(".close-box ").unbind("click").unbind("mouseover").unbind("mouseout"); $(".close-box ").bind("click",function(){ $(this).parent().fadeToggle("slow"); $("#screen").hide(); }).bind("mouseover",function(){ $(this).children().attr("src","IDR_CLOSE_DIALOG_H.png"); //$(this).css("background-color","#ccc"); 如果不是转换图片 }).bind("mouseout",function(){ $(this).children().attr("src","IDR_CLOSE_DIALOG.png"); //$(this).css("background-color","#fff"); 如果不是转换图片 }); }); </script> </body> </html>

评论收藏

内容反馈