<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>jquery 实现遮罩层效果</title> <mce:script type="text/javascript" src="jquery.min.js" mce_src="jquery.min.js"></mce:script> <mce:style type="text/css"><!-- #dialog { border:1px solid #fff; position:relative; z-index: 50; width:170px; padding:0 5px; background-color: #fff; } #tid { border:1px solid #000; } .overclass { background-color: #ccc; } .outclass { /* background-color:#0f0;*/ } --></mce:style><style type="text/css" mce_bogus="1">#dialog { border:1px solid #fff; position:relative; z-index: 50; width:170px; padding:0 5px; background-color: #fff; } #tid { border:1px solid #000; } .overclass { background-color: #ccc; } .outclass { /* background-color:#0f0;*/ } </style> <mce:script type="text/javascript"><!-- /* 作者:落寞三少 QQ:398504533 */ /* *@param tabID 表格名称 *@param oveClass 鼠标进入时的样式 *@param outClass 鼠标离开时的样式(为样式名称) */ function altrow(tabID,oveClass) { var rowObj = $("#" + tabID).find("tr"); $.each(rowObj, function (i, obj) { var tr = $(obj); tr.mousemove(function () { tr.addClass(oveClass); }); tr.mouseout(function () { tr.removeClass(oveClass); }); }); } function initClick(){ $('#content a').click(function(){ var offset = $(this).offset(); $('#dialog').remove(); $(this).parent().append('<div id="dialog"><table id="tid">/ <tr><td><div class="active"><a href="javascript:void(0);" mce_href="javascript:void(0);" class="editstart" ">已启用</a></div></td></tr>/ <tr><td><div class=""><a href="javascript:void(0);" mce_href="javascript:void(0);" class="editpause"">已暂停</a></td></tr></div>/ <tr><td><div class="delete"><a href="javascript:void(0);" mce_href="javascript:void(0);" class="editstatus"">已删除</a></td></tr></div>/ </table></div>/ '); $('#dialog').css({'left':offset.left-4,'top':offset.top-3}); altrow('tid','overclass'); $('.editstart').click(function(){ $('#dialog').html('<img border="0" align="absbottom" style="padding:2px;" mce_style="padding:2px;" class="IcoLoading" src="loading.gif" mce_src="loading.gif"><span style="padding:5px" mce_style="padding:5px">正在保存...</span>|<span id=""cancle><a href="javascript:void(0)" mce_href="javascript:void(0)" class="oncancle">取消</a></span>'); $('body').append('<iframe id="iframe_load"></iframe><div id="div_load"></div>'); $('#iframe_load').css('opacity', 0); $('#div_load').css({'opacity':0.5,'background':'#000'}); $('#iframe_load,#div_load').css({ position:'absolute', top:0, left:0, width:$(document).width(), height:$(document).height(), zIndex:5 }); $('.oncancle').click(function(){ $('#dialog').remove(); $('#iframe_load').remove(); $('#div_load').remove(); }) }) }) } // --></mce:script> </head> <body> <div id="content"> <a href="javascript:void(0)" mce_href="javascript:void(0)" class="editpus">baidu</a> <a href="javascript:void(0)" mce_href="javascript:void(0)" class="editpus">google</a> <a href="javascript:void(0)" mce_href="javascript:void(0)" class="editpus">gougou</a> </div> <mce:script type="text/javascript"><!-- $(document).ready(initClick); // --></mce:script> </body> </html>
17:54:28