html按钮背景只显示一次,html点击按钮后，显示层，锁定背景

注：本技术采用jquery，所以在用的时候记得引入jquery库

html代码

按钮

    

js 代码

//获取说明数据

function operGroup(){

var format =

"        

"+

"        

新增分组

"+

"            

"            

"+

"            

"+

"            组别名称：
"+

"            排      序："+

"            

"+

"            

• "+

"            

保存取消"+

"                

"+

"                

"+

"            

"+

"            

"+

"            

"+

"        

";

$("#explain-pop").html(format);

showExplainDialog();

$("#btnCloseExplain").unbind('click');

$("#btnCloseExplain").click(function(){

$("#explain-pop").hide();

$(".overlay").hide();

});

}

//弹出说明对话框

function showExplainDialog(){

showOverlay();

adjust("explain-pop");

$("#explain-pop").show();

}

function showOverlay(){

$(".overlay").height(pageHeight());

$(".overlay").width(pageWidth());

$(".overlay").show();

}

/* 定位到页面中心 */

function adjust(id) {

var w = $("#"+id).width();

var h = $("#"+id).height();

var t = scrollY() + (windowHeight()/2) - (h/2);

if(t < 0) t = 0;

var l = scrollX() + (windowWidth()/2) - (w/2);

if(l < 0) l = 0;

$("#"+id).css({left: l+'px', top: t+'px'});

}

//浏览器视口的高度

function windowHeight() {

var de = document.documentElement;

return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;

}

//浏览器视口的宽度

function windowWidth() {

var de = document.documentElement;

return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth

}

/* 浏览器垂直滚动位置 */

function scrollY() {

var de = document.documentElement;

return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;

}

/* 浏览器水平滚动位置 */

function scrollX() {

var de = document.documentElement;

return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;

}

/* 当前页面高度 */

function pageHeight() {

var scrollHeight = document.body.scrollHeight;

var winHeight = windowHeight();

return scrollHeight > winHeight ? scrollHeight : winHeight;

}

/* 当前页面宽度 */

function pageWidth() {

var scrollWidth = document.body.scrollWidth;

var winWidth = windowWidth();

return scrollWidth > winWidth ? scrollWidth : winWidth;

}

本文仅本人研究弹出层所用，欢迎多提宝贵意见！