$(function () { $("#ok").click(function () { $("#loading-mask").css('display', 'none'); $("#loading").css('display', 'none'); }); $("#showmask").click(function () { $("#loading-mask").css('display', 'block'); $("#loading").css('display', 'block'); }); });
<h2>遮罩的实现</h2> <div id='loading-mask'></div> <button id='showmask'>弹出遮罩</button> <button onclick='alert("点着我了");'>点我试试</button> <div id="loading"> <div class="loading-indicator"> <span id="loading-msg">Loading ...</span> <button id="ok">OK</button> </div> </div>
#loading-mask { position:absolute; left:0; top:0; width:100%; height:100%; z-index:20000; background-color:gray; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; } #loading { position:absolute; left:45%; top:40%; padding:2px; z-index:20001; height:auto; } #loading .loading-indicator { background:white; color:#444; font:bold 20px tahoma, arial, helvetica; padding:10px; margin:0; height:auto; } #loading-msg { font: normal 18px arial, tahoma, sans-serif; }