HTML，jsp，遮罩层，求一个最简单的遮罩层，在线 jsp实现loading效果（遮罩层）
\u5982\u4f55\u7528JSP\u5b9e\u73b0\u81ea\u52a8\u5f39\u51faDiv\uff0c\u6700\u597d\u5e26\u6709\u906e\u7f69\u5c42\u5199\u6210\u4e00\u4e2a\u65b9\u6cd5\uff0c\u52a0\u8f7d\u7684\u65f6\u5019\u8c03\u7528
dialog
$(document).ready(function(){
var bheight=document.body.clientHeight;
function layer(){
jsp\u4e2d\u5b9e\u73b0loading\u6548\u679c\uff0c\u5e26\u906e\u7f69\u5c42\u7684\u5b9e\u73b0\u65b9\u6cd5\u5982\u4e0b\uff1a
var MaskUtil = (function(){
var $mask,$maskMsg;
var defMsg = '\u6b63\u5728\u5904\u7406\uff0c\u8bf7\u7a0d\u5f85\u3002\u3002\u3002';
function init(){
if(!$mask){
$mask = $("").appendTo("body");
}
if(!$maskMsg){
$maskMsg = $(""+defMsg+"")
.appendTo("body").css({'font-size':'12px'});
}
$mask.css({width:"100%",height:$(document).height()});
$maskMsg.css({
left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2,
});
}
return {
mask:function(msg){
init();
$mask.show();
$maskMsg.html(msg||defMsg).show();
}
,unmask:function(){
$mask.hide();
$maskMsg.hide();
}
}
}());
\u9700\u8981\u7528\u5230\u7684css\u6837\u5f0f\uff1a
.datagrid-mask-msg {
position: absolute;
top: 50%;
margin-top: -20px;
padding: 12px 5px 10px 30px;
width: auto;
height: 16px;
border-width: 2px;
border-style: solid;
display: none;
}
\u5b9e\u73b0\u7684\u6548\u679c\uff1a
<!--
.STYLE1 {color: #000000}
.list_que{
text-decoration: none !important;
color: #000000 !important;
}
.lt_ccz_ima{
cursor: pointer;
}
.faq_list{
width: 753px;
height: 500px;
}
.sj_dxcd{ height:27px; line-height:27px; background-image: url(../images/faqFeedback/xt_12.jpg);
background-position:bottom; background-repeat:repeat-x; margin-top:20px; text-align:left;
}
.nav1{ float:left; margin-left:15px; background-image:url(../images/faqFeedback/xt_13.jpg);
height:27px; width:88px; line-height:27px; text-align:center; color:#005BAC;
font-weight:bold;cursor:pointer;
}
.nav2{ float:left; margin-left:15px; background-image:url(../images/faqFeedback/xt_14.jpg);
height:27px; width:88px; line-height:27px; text-align:center;
cursor:pointer;
}
/*标题提示文字定义*/
body div#tooltip { position:absolute; z-index:1000; max-width:300px; width:auto!important; width:auto; background:#006CDB; border:#FEFFD4 solid 1px; text-align:left; padding:3px;}
body div#tooltip p { margin:0;padding:0; color:#FFFFFE;font:12px verdana,arial,sans-serif;}
body div#tooltip p em { display:block;margin-top:3px; color:#f60;font-style:normal; font-weight:bold;}
-->
</style>
<script type="text/javascript"><!--
$(function(){
//$(".news_content p:odd").addClass("p03"); //隔行换色处，额数行增加样式P03
//鼠标经过样式变化处
$(".list_unit").hover(
function () {
$(this).addClass("p02"); //鼠标经过时增加样式P02
},
function () {
$(this).removeClass("p02"); //鼠标离开时移除样式P02
}
)
$(".list_show a").toggle(
function(){
$("#an_"+this.id).slideDown("slow");
parent.addframeAutoHeight(290,1);
},
function(){
$("#an_"+this.id).slideUp("slow");
parent.addframeAutoHeight(290,2);
}
);
})
//标题提示效果处
var sweetTitles = {
x : 10,
y : 20,
tipElements : ".list_que",
init : function() {
$(this.tipElements).mouseover(function(e){
this.myTitle = this.title;
this.myHref = this.href;
this.myHref = (this.myHref.length > 200 ? this.myHref.toString().substring(0,200)+"..." : this.myHref);
this.title = "";
var tooltip = "";
if(this.myTitle == "")
{
tooltip = "";
}
else
{
tooltip = "<div id='tooltip'><p>"+this.myTitle+"</p></div>";
}
$('body').append(tooltip);
$('#tooltip')
.css({
"opacity":"0",
"top":(e.pageY+20)+"px",
"left":(e.pageX+10)+"px"
}).show('fast');
}).mouseout(function(){
this.title = this.myTitle;
$('#tooltip').remove();
}).mousemove(function(e){
$('#tooltip')
.css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+10)+"px"
});
});
}
};
$(function(){
sweetTitles.init();
});
function enFloat(){
var x = getPageSize().pageWidth;
var y = getPageSize().pageHeight;
//遮蔽层
document.getElementById("float_div").style.display = "block";
document.getElementById("float_div").style.width = x + "px";
document.getElementById("float_div").style.height = y + "px";
//浮出层
document.getElementById("float_main").style.display = "block";
var o_w = document.getElementById("float_main").clientWidth;
var o_h = document.getElementById("float_main").clientHeight;
var o_l = Math.round((x - o_w)/2);
var s_h = getScrollLocation()+ (350 - Math.round(o_h/2));
if(s_h <= 0){
s_h = getScrollLocation();
}
document.getElementById("float_main").style.left = o_l + "px";
document.getElementById("float_main").style.top = s_h + "px";
/**
if(HYXCheckIEVersion() == "ie6"){
HYXnotDisplaySelect(0);
}
*/
}
function disFloat(){
/**
if(HYXCheckIEVersion() == "ie6"){
HYXnotDisplaySelect(1);
}
*/
document.getElementById("float_div").style.display = "none";
document.getElementById("float_main").style.display = "none";
}
function getScrollLocation(){
var scrollPos;
//firefox
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
//IE6
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}
return scrollPos;
}
function getPageSize(){
var pageWidth , pageHeight;
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
return {pageWidth:pageWidth,pageHeight:pageHeight};
}
function HYXnotDisplaySelect(x){
var obj = new Object;
obj = document.getElementsByTagName("select");
for(var i=0;i<obj.length;i++){
if(obj[i].className == "hen_sel"){
continue;
}
if(x==0){
obj[i].style.display = "none";
}
else{
obj[i].style.display = "";
}
}
var iframe = new Object;
iframe = document.getElementsByTagName("iframe");
for(var i=0;i<iframe.length;i++)
{
if(iframe[i].src.indexOf('http') != -1)
{
continue;
}
var iframeselect = window.frames[i].document.getElementsByTagName("select");
for(var j=0;j<iframeselect.length;j++)
{
if(obj[j].className == "hen_sel"){
continue;
}
if(x==0)
{
iframeselect[j].style.display = "none";
}else
{
iframeselect[j].style.display = "";
}
}
}
}
function HYXCheckIEVersion()
{
if (document.all)
{
//IE
if ( /MSIE 6.0/ig.test(navigator.appVersion) )
{
//为ie6
return "ie6";
}
}
return "";
}
function main(obj)//调用演示
{
enFloat();
}
留个邮箱 发你几个自己常用的 比较简洁
绛旓細target鏄墦寮閾炬帴鏃剁敤浠涔堢洰鏍囨墦寮锛屾槸鍦ㄦ柊绐楀彛涓墦寮灏辩敤target=_blank锛屽湪鐖剁獥鍙ｄ腑鎵撳紑灏辩敤target=_parent锛屽湪褰撳墠绐楀彛涓墦寮灏辩敤target=_self,target=_top琛ㄧず鍦ㄩ《灞傜獥鍙ｄ腑鎵撳紑 target鏍规湰灏变笉瀛樺湪鎸囧悜闂锛屽鏋滄槸href鎵цid鐨勮瘽灏辩浉褰撲簬閿氱偣锛岀偣鍑绘閾炬帴锛屽睆骞曠洿鎺ヨ烦鍒版寚瀹歩d鐨勫唴瀹逛綅缃 ...
