<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <mce:script type="text/javascript" src="lib/jquery/jquery-1.4.2.min.js" mce_src="lib/jquery/jquery-1.4.2.min.js"><!-- // --></mce:script> <mce:script type="text/javascript"><!-- function mask(msg){ var op = { opacity: 0.8, z: 10000, bgcolor: '#ccc' }; var original = $(document.body); var position = { top: 0, left: 0 }; if (this[0] && this[0] !== window.document) { original = this; position = original.position(); } var maskDiv = $('div.maskdivgen'); maskDiv.appendTo(original); var maskWidth = original.outerWidth(); if (!maskWidth) { maskWidth = original.width(); } var maskHeight = original.outerHeight(); if (!maskHeight) { maskHeight = original.height(); } maskDiv.css({ position: 'absolute', top: position.top, left: position.left, 'z-index': op.z, width: maskWidth, height: maskHeight, 'background-color': op.bgcolor, opacity: 50 }); var msgDiv = $('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca" mce_style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px" mce_style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">' + msg + '</div></div>'); msgDiv.appendTo(maskDiv); var widthspace = (maskDiv.width() - msgDiv.width()); var heightspace = (maskDiv.height() - msgDiv.height()); msgDiv.css({ cursor: 'wait', top: (heightspace / 2 - 2), left: (widthspace / 2 - 2) }); maskDiv.show(); // maskDiv.fadeIn('fast', function(){ // // 淡入淡出效果 // $(this).fadeTo('slow', op.opacity); // }) return maskDiv; } function unmask(selector){ var original = $(document.body); if (this[0] && this[0] !== window.document) { original = $(this[0]); } selector.fadeOut('slow', 0, function(){ $(this).remove(); }); } $().ready(function(){ var div_1= mask('Hello world'); $(div_1).click(function(){ unmask(div_1); }); }); // --></mce:script> <mce:style><!-- .loading { font-size: 12px; color: #FFFFFF; background: #FF0000; position: absolute; top: 500px; left: 500px; z-index: 1002; padding: 2px 10px 2px 10px } --></mce:style><style mce_bogus="1"> .loading { font-size: 12px; color: #FFFFFF; background: #FF0000; position: absolute; top: 500px; left: 500px; z-index: 1002; padding: 2px 10px 2px 10px } </style> <title>Untitled Document</title> </head> <body> <fieldset> <legend> Collapsible List — Take 1 </legend> <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 <ul> <li> Item 3.1 </li> <li> Item 3.2 <ul> <li> Item 3.2.1 </li> <li> Item 3.2.2 </li> <li> Item 3.2.3 </li> </ul> </li> <li> Item 3.3 </li> </ul> </li> <li> Item 4 <ul> <li> Item 4.1 </li> <li> Item 4.2 <ul> <li> Item 4.2.1 </li> <li> Item 4.2.2 </li> </ul> </li> </ul> </li> <li> Item 5 </li> </ul> </fieldset> <div class='maskdivgen'> </div> </body> </html>