html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)

div对话框,js+div+css实现好看的提示框效果(转)

(2012-02-18 20:46:23)

标签：

html

div

css

杂谈

提示窗都越来越人性化了，呵呵，有的时候老板就和你要那么一个框，没办法，急的你焦头烂额，怎么也不知道那个框框是怎么弄出来的，确实，看似简单的一个提示框，背后写的代码却有些复杂，今天周末我就抽时间把这个提示框功能加一个详细的注释发布上来，以供网友们参考。

html代码很简单了，在页面里把下面这句粘上去

点击测试

然后把这段js也粘上去，先看看效果。然后我在讲解一些重要的代码。

function sAlert(str)

{

var msgw,msgh,bordercolor;

msgw=300;//提示窗口的宽度

msgh=200;//提示窗口的高度

titleheight=25 //提示窗口标题高度

bordercolor="#FF3C00";//提示窗口的边框颜色

titlecolor="#D2CECE";//提示窗口的标题颜色

var sWidth,sHeight;

//sWidth=document.body.offsetWidth; //得出当前屏幕的宽

sWidth=document.body.clientWidth;//BODY对象宽度

//sHeight=screen.height;//得到当前屏幕的高

//sHeight=document.body.clientHeight;//BODY对象高度

if (windows.innerHeight && window.scrollMaxY)

{

sHeight = windows.innerHeight + window.scrollMaxY;

}

else if (document.body.scrollHeight >

document.body.offsetHeight)

{

sHeight = document.body.scrollHeight;

}

else

{

sHeight = document.body.offsetHeight;

}//以上得到整个屏幕的高

var bgObj=document.createElement_x_x("div");//创建一个div对象

bgObj.setAttribute('id','bgDiv');//可以用bgObj.id="bgDiv"的方法，是为div指定属性值

bgObj.style.position="absolute";//把bgDiv这个div绝对定位

bgObj.style.top="0";//顶部为0

bgObj.style.background="#777";//背景颜色

bgObj.style.filter="progid:DXImageTransform.Micros

oft.Alpha(style=3,opacity=25,finishOpacity=75)";//i e浏览器透明度设置

bgObj.style.opacity="0.6";//透明度(火狐浏览器中)

bgObj.style.left="0";//左边为0

bgObj.style.width=sWidth + "px";//宽(上面得到的屏幕宽度)

bgObj.style.height=sHeight + "px";//高(上面得到的屏幕高度)

bgObj.style.zIndex = "100";//层的z轴位置

document.body.appendChild(bgObj);

var msgObj=document.createElement_x_x("div")//创建一个div对象

msgObj.setAttribute("id","msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值

msgObj.setAttribute("align","center");//为div的align赋值

msgObj.style.background="white";//背景颜色为白色

msgObj.style.border="1px solid " +

bordercolor;//边框属性，颜色在上面已经赋值

msgObj.style.position = "absolute";//绝对定位

msgObj.style.left = "35%";//从左侧开始位置

msgObj.style.top = "30%";//从上部开始位置

msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica,

sans-serif";//字体属性

//msgObj.style.marginLeft = "-225px";//左外边距

//msgObj.style.marginTop =

-75+document.documentElement.scrollTop+"px";//上外边距

msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)

msgObj.style.height =msgh + "px";//提示框的高(上面定义过)

msgObj.style.textAlign = "center";//文本位置属性，居中。

msgObj.style.lineHeight ="25px";//行间距

msgObj.style.zIndex = "101";//层的z轴位置

var title=document.createElement_x_x("h4");//创建一个h4对象

title.setAttribute("id","msgTitle");//为h4对象填加标题

title.setAttribute("align","right");//文字对齐方式

title.style.margin="0";//浮动

title.style.padding="3px";//浮动

title.style.background=titlecolor;//背景颜色

title.style.filter="progid:DXImageTransform.Micros

oft.Alpha(startX=20, startY=20, finishX=100,

finishY=100,style=1,opacity=75,finishOpacity=100); ";

title.style.opacity="0.75";//透明

//title.style.border="1px solid " + bordercolor;//边框

title.style.height="25px";//高度

title.style.font="12px Verdana, Geneva, Arial, Helvetica,

sans-serif";//字体属性

title.style.color="white";//文字颜色

title.style.cursor="pointer";//鼠标样式

title.innerHTML="

href=\"#\">关闭

";//显示的文字

title.οnclick=function()

{

document.body.removeChild(bgObj);//移除遮罩层

document.getElementByIdx_xx_x("msgDiv").removeChild(t

itle);//在提示框中移除标题

document.body.removeChild(msgObj);//移除提示框

}

document.body.appendChild(msgObj);//在body中画出提示框层

document.getElementByIdx_xx_x("msgDiv").appendChild(t

itle);//在提示框中增加标题

var txt=document.createElement_x_x("p");

txt.style.margin="1em 0";//文本浮动

txt.setAttribute("id","msgTxt");//为p属性增加id属性

txt.innerHTML=str;//把传进来的值赋给p属性

document.getElementByIdx_xx_x("msgDiv").appendChild(t

xt);//把p属性增加到提示框里

}

注释我大概都加上了div+csscss，如果你有哪句不懂什么意思的，那只能说明你对js语法不是很了解，很简单，把代码拿到百度上搜索一下就明白什么意思了。

我这里讲几个重要的地方，第一：

//sHeight=screen.height;//得到当前屏幕的高

//sHeight=document.body.clientHeight;//BODY对象高度

if (windows.innerHeight && window.scrollMaxY)

{

sHeight = windows.innerHeight + window.scrollMaxY;

}

else if (document.body.scrollHeight >

document.body.offsetHeight)

{

sHeight = document.body.scrollHeight;

}

else

{

sHeight = document.body.offsetHeight;

}//以上得到整个屏幕的高

可以看到这个变量被赋了好几次，开始我用的前面的赋值，但是后来发现，如果一旦屏幕太长，出现滚动条，上面的高度只是得出当前屏幕的高度，当我们弹出对话框的时候底下的遮罩层，只在第一层遮罩，下面的都不管用，后来经过仔细研究，www.webyuanma.com写出来了下面那几行判断的代码，这样就可以把整个网页都给遮罩上了。

当把上面我们需要的属性都设置好以后，就用这句代码document.body.appendChild(bgObj);把第一个半透明遮罩层给输出到屏幕上。

接下来又定义了一个div，然后还是一堆属性的赋值，然后这两句话很重要

document.body.appendChild(msgObj);//在body中画出提示框层

document.getElementByIdx_xx_x("msgDiv").appendChild(t

itle);//在提示框中增加标题

这是点击关闭按钮以后的处理代码

title.οnclick=function()

{

document.body.removeChild(bgObj);//移除遮罩层

document.getElementByIdx_xx_x("msgDiv").removeChild(t

itle);//在提示框中移除标题

document.body.removeChild(msgObj);//移除提示框

}

都很简单了，就是移除，关闭就行了。

转自：http://www.it300.net/Contents.asp?id=

分享：

喜欢

0

赠金笔

加载中，请稍候......

评论加载中，请稍候...

发评论

登录名： 密码： 找回密码 注册记住登录状态

昵   称：

评论并转载此博文

发评论

以上网友发言只代表其个人观点，不代表新浪网的观点或立场。