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

2023年12月6日发(作者：百代之过客)

-

htmlcss好看的提示框,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=Width; //得出当前屏幕的宽

sWidth=Width;//BODY对象宽度

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

//sHeight=Height;//BODY对象高度

if (eight && MaxY)

{

sHeight = eight + MaxY;

}

el if (Height >

Height)

{sHeight = Height;

}

el

{

sHeight = Height;

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

var bgObj=Element_x_x("div");//创建一个div对象

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

on="absolute";//把bgDiv这个div绝对定位

="0";//顶部为0

ound="#777";//背景颜色

="progid:

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

y="0.6";//透明度(火狐浏览器中)

="0";//左边为0

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

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

= "100";//层的z轴位置

Child(bgObj);

var msgObj=Element_x_x("div")//创建一个div对象

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

ribute("align","center");//为div的align赋值

ound="white";//背景颜色为白色

="1px solid " +

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

on = "absolute";//绝对定位

= "35%";//从左侧开始位置

= "30%";//从上部开始位置

="12px/1.6em Verdana, Geneva, Arial, Helvetica,

sans-rif";//字体属性

//Left = "-225px";//左外边距

//Top =

-75+Top+"px";//上外边距

= msgw + "px";//提示框的宽(上面定义过) =msgh + "px";//提示框的高(上面定义过)

ign = "center";//文本位置属性，居中。

ight ="25px";//行间距

= "101";//层的z轴位置

var title=Element_x_x("h4");//创建一个h4对象

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

ribute("align","right");//文字对齐方式

="0";//浮动

g="3px";//浮动

ound=titlecolor;//背景颜色

="progid:

(startX=20, startY=20, finishX=100,

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

y="0.75";//透明

//="1px solid " + bordercolor;//边框

="25px";//高度

="12px Verdana, Geneva, Arial, Helvetica,

sans-rif";//字体属性

="white";//文字颜色

="pointer";//鼠标样式

TML="

href="#">关闭

";//显示的文字

title.οnclick=function()

{

Child(bgObj);//移除遮罩层

mentByIdx_xx_x("msgDiv").removeChild(t

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

Child(msgObj);//移除提示框

}

Child(msgObj);//在body中画出提示框层

mentByIdx_xx_x("msgDiv").appendChild(t

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

var txt=Element_x_x("p");="1em 0";//文本浮动

ribute("id","msgTxt");//为p属性增加id属性

TML=str;//把传进来的值赋给p属性

mentByIdx_xx_x("msgDiv").appendChild(t

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

}

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

下就明白什么意思了。

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

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

//sHeight=Height;//BODY对象高度

if (eight && MaxY)

{

sHeight = eight + MaxY;

}

el if (Height >

Height)

{

sHeight = Height;

}

el

{

sHeight = Height;

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

可以看到这个变量被赋了好几次，开始我用的前面的赋值，但是后来发现，如果一旦屏幕太长，出现滚动条，上面的高度只是得出当前屏幕

的高度，当我们弹出对话框的时候底下的遮罩层，只在第一层遮罩，下面的都不管用，后来经过仔细研究，写出来

了下面那几行判断的代码，这样就可以把整个网页都给遮罩上了。

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

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

Child(msgObj);//在body中画出提示框层

mentByIdx_xx_x("msgDiv").appendChild(t

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

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

title.οnclick=function()

{Child(bgObj);//移除遮罩层

mentByIdx_xx_x("msgDiv").removeChild(t

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

Child(msgObj);//移除提示框

}

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

分享：

喜欢

0

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

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

发评论

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

昵 称：

评论并转载此博文

发评论

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

赠金笔

-