2023年6月20日发(作者：)

htmlcss好看的提⽰框,div对话框,js+div+css实现好看的提⽰框效果（转）div对话框,js+div+css实现好看的提⽰框效果(转)(2012-02-18 20:46:23)标签：htmldivcss杂谈提⽰窗都越来越⼈性化了，呵呵，有的时候⽼板就和你要那么⼀个框，没办法，急的你焦头烂额，怎么也不知道那个框框是怎么弄出来的，确实，看似简单的⼀个提⽰框，背后写的代码却有些复杂，今天周末我就抽时间把这个提⽰框功能加⼀个详细的注释发布上来，以供⽹友们参考。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;}else if (Height >Height){sHeight = Height;}else{sHeight = Height;}//以上得到整个屏幕的⾼var bgObj=Element_x_x("div");//创建⼀个div对象ribute('id','bgDiv');//可以⽤="bgDiv"的⽅法，是为div指定属性值on="absolute";//把bgDiv这个div绝对定位="0";//顶部为ound="#777";//背景颜⾊="progid:(style=3,opacity=25,finishOpacity=75)";//i e浏览器透明度设置y="0.6";//透明度(⽕狐浏览器中)="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-serif";//字体属性//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-serif";//字体属性="white";//⽂字颜⾊="pointer";//⿏标样式TML="href="#">关闭";//显⽰的⽂字title.οnclick=function(){Child(bgObj);//移除遮罩层mentByIdx_xx_x("msgDiv").removeChild(title);//在提⽰框中移除标题Child(msgObj);//移除提⽰框}Child(msgObj);//在body中画出提⽰框层mentByIdx_xx_x("msgDiv").appendChild(title);//在提⽰框中增加标题var txt=Element_x_x("p");="1em 0";//⽂本浮动ribute("id","msgTxt");//为p属性增加id属性TML=str;//把传进来的值赋给p属性mentByIdx_xx_x("msgDiv").appendChild(txt);//把p属性增加到提⽰框⾥}注释我⼤概都加上了div+csscss，如果你有哪句不懂什么意思的，那只能说明你对js语法不是很了解，很简单，把代码拿到百度上搜索⼀下就明⽩什么意思了。我这⾥讲⼏个重要的地⽅，第⼀：//sHeight=;//得到当前屏幕的⾼//sHeight=Height;//BODY对象⾼度if (eight && MaxY){sHeight = eight + MaxY;}else if (Height >Height){sHeight = Height;}else{sHeight = Height;}//以上得到整个屏幕的⾼可以看到这个变量被赋了好⼏次，开始我⽤的前⾯的赋值，但是后来发现，如果⼀旦屏幕太长，出现滚动条，上⾯的⾼度只是得出当前屏幕的⾼度，当我们弹出对话框的时候底下的遮罩层，只在第⼀层遮罩，下⾯的都不管⽤，后来经过仔细研究，写出来了下⾯那⼏⾏判断的代码，这样就可以把整个⽹页都给遮罩上了。当把上⾯我们需要的属性都设置好以后，就⽤这句代码Child(bgObj);把第⼀个半透明遮罩层给输出到屏幕上。接下来⼜定义了⼀个div，然后还是⼀堆属性的赋值，然后这两句话很重要Child(msgObj);//在body中画出提⽰框层mentByIdx_xx_x("msgDiv").appendChild(title);//在提⽰框中增加标题这是点击关闭按钮以后的处理代码title.οnclick=function(){Child(bgObj);//移除遮罩层mentByIdx_xx_x("msgDiv").removeChild(title);//在提⽰框中移除标题Child(msgObj);//移除提⽰框}都很简单了，就是移除，关闭就⾏了。分享：喜欢0加载中，请稍候......评论加载中，请稍候...发评论登录名： 密码： 找回密码 注册记住登录状态昵 称：评论并转载此博⽂发评论以上⽹友发⾔只代表其个⼈观点，不代表新浪⽹的观点或⽴场。赠⾦笔

2023年6月20日发(作者：)

htmlcss好看的提⽰框,div对话框,js+div+css实现好看的提⽰框效果（转）div对话框,js+div+css实现好看的提⽰框效果(转)(2012-02-18 20:46:23)标签：htmldivcss杂谈提⽰窗都越来越⼈性化了，呵呵，有的时候⽼板就和你要那么⼀个框，没办法，急的你焦头烂额，怎么也不知道那个框框是怎么弄出来的，确实，看似简单的⼀个提⽰框，背后写的代码却有些复杂，今天周末我就抽时间把这个提⽰框功能加⼀个详细的注释发布上来，以供⽹友们参考。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;}else if (Height >Height){sHeight = Height;}else{sHeight = Height;}//以上得到整个屏幕的⾼var bgObj=Element_x_x("div");//创建⼀个div对象ribute('id','bgDiv');//可以⽤="bgDiv"的⽅法，是为div指定属性值on="absolute";//把bgDiv这个div绝对定位="0";//顶部为ound="#777";//背景颜⾊="progid:(style=3,opacity=25,finishOpacity=75)";//i e浏览器透明度设置y="0.6";//透明度(⽕狐浏览器中)="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-serif";//字体属性//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-serif";//字体属性="white";//⽂字颜⾊="pointer";//⿏标样式TML="href="#">关闭";//显⽰的⽂字title.οnclick=function(){Child(bgObj);//移除遮罩层mentByIdx_xx_x("msgDiv").removeChild(title);//在提⽰框中移除标题Child(msgObj);//移除提⽰框}Child(msgObj);//在body中画出提⽰框层mentByIdx_xx_x("msgDiv").appendChild(title);//在提⽰框中增加标题var txt=Element_x_x("p");="1em 0";//⽂本浮动ribute("id","msgTxt");//为p属性增加id属性TML=str;//把传进来的值赋给p属性mentByIdx_xx_x("msgDiv").appendChild(txt);//把p属性增加到提⽰框⾥}注释我⼤概都加上了div+csscss，如果你有哪句不懂什么意思的，那只能说明你对js语法不是很了解，很简单，把代码拿到百度上搜索⼀下就明⽩什么意思了。我这⾥讲⼏个重要的地⽅，第⼀：//sHeight=;//得到当前屏幕的⾼//sHeight=Height;//BODY对象⾼度if (eight && MaxY){sHeight = eight + MaxY;}else if (Height >Height){sHeight = Height;}else{sHeight = Height;}//以上得到整个屏幕的⾼可以看到这个变量被赋了好⼏次，开始我⽤的前⾯的赋值，但是后来发现，如果⼀旦屏幕太长，出现滚动条，上⾯的⾼度只是得出当前屏幕的⾼度，当我们弹出对话框的时候底下的遮罩层，只在第⼀层遮罩，下⾯的都不管⽤，后来经过仔细研究，写出来了下⾯那⼏⾏判断的代码，这样就可以把整个⽹页都给遮罩上了。当把上⾯我们需要的属性都设置好以后，就⽤这句代码Child(bgObj);把第⼀个半透明遮罩层给输出到屏幕上。接下来⼜定义了⼀个div，然后还是⼀堆属性的赋值，然后这两句话很重要Child(msgObj);//在body中画出提⽰框层mentByIdx_xx_x("msgDiv").appendChild(title);//在提⽰框中增加标题这是点击关闭按钮以后的处理代码title.οnclick=function(){Child(bgObj);//移除遮罩层mentByIdx_xx_x("msgDiv").removeChild(title);//在提⽰框中移除标题Child(msgObj);//移除提⽰框}都很简单了，就是移除，关闭就⾏了。分享：喜欢0加载中，请稍候......评论加载中，请稍候...发评论登录名： 密码： 找回密码 注册记住登录状态昵 称：评论并转载此博⽂发评论以上⽹友发⾔只代表其个⼈观点，不代表新浪⽹的观点或⽴场。赠⾦笔