<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <script src="jquery.1.11.0.min.js"></script> <script type="text/javascript"> $(function () { settime_show(); $(\'#btn\').click(function () { }); }); function settime_show() { setTimeout(show, 2000); } function show() { $(\'.bg\').show(); $(\'.show\').fadeIn(\'slow\') //$(\'.show\').show(\'slow\'); setTimeout(hide, 4000); //$(\'.show\').slideToggle(\'slow\') //$(\'.show\').fadeToggle(\'slow\'); } function hide() { //$(\'.bg\').hide(\'slow\'); //$(\'.show\').hide(\'slow\'); $(\'.show\').fadeOut(\'slow\'); $(\'.bg\').fadeOut(\'slow\'); } </script> <style type="text/css"> .bg { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.7; opacity: .70; filter: alpha(opacity=70); } .show { display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index: 1002; text-align:center; /*overflow: auto;*/ } </style> </head> <body> <button id="btn">show</button> <div class="show"> <img src="/356.jpg" width="300" height="300"/> </div> <div class ="bg"></div> </body> </html>
相关文章：