<html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>半透明遮蔽层div</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport"> <link rel="stylesheet" type="text/css" href="animations.css"> <script src="jquery-1.7.1.js" type="text/javascript" ></script> <style> * { padding: 0px; margin: 0px; } .shade { background-color:#000; opacity:0.8; filter:alpha(opacity=80); z-index: 8888; height: 100%; left: 0; top: 0; width: 100%; position: fixed; } .city-wrapper { width: 80%; position: absolute; z-index: 8888; height: 300px; background-color: #ffffff; margin-top: 200px; margin-left: 10%; } .city-list { list-style: none; } .city-list li { width: 100%; height: 30px; line-height: 30px; text-align: center; border-bottom: 1px solid #eeeeee; } </style> </head> <body> <input id="show" type="button" value="点击" /> <div class="shade"></div> <div class="city-wrapper pt-page-moveCircle"> <ul class="city-list"> <li value="1">测试</li> <li value="2">测试</li> <li value="3">测试</li> <li value="4">测试</li> <li value="5">测试</li> <li value="6">测试</li> </ul> </div> <script type="text/javascript"> $(function() { $("#show").click(function() { $(".shade").show(); $(".city-wrapper").show(); }); $(".shade, .city-wrapper").click(function() { $(".shade").hide(); $(".city-wrapper").hide(); }); $(".city-list li").click(function() { alert($(this).val()); }); }); </script> </body> </html>
半透明遮蔽层div
猜你喜欢
转载自zzc1684.iteye.com/blog/2301672
今日推荐
周排行