<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>
