htmlcss好看的提⽰框,div对话框,js+div+css实现好看的提⽰框
效果（转）
div对话框,js+div+css实现好看的提⽰框效果(转)
(2012-02-18 20:46:23)
标签：
html
div
css
杂谈
提⽰窗都越来越⼈性化了，呵呵，有的时候⽼板就和你要那么⼀个框，没办法，急的你焦头烂额，怎么也不知道那个框框是怎么弄出来的，确实，看似简单的⼀个提⽰框，背后写的代码却有些复杂，今天周末我就抽时间把这个提⽰框功能加⼀个详细的注释发布上来，以供⽹友们参考。
html代码很简单了，在页⾯⾥把下⾯这句粘上去
然后把这段js也粘上去，先看看效果。然后我在讲解⼀些重要的代码。
function sAlert(str)
{
lambda函数lispvar msgw,msgh,bordercolor;
msgw=300;//提⽰窗⼝的宽度
msgh=200;//提⽰窗⼝的⾼度
titleheight=25 //提⽰窗⼝标题⾼度
bordercolor="#FF3C00";//提⽰窗⼝的边框颜⾊
titlecolor="#D2CECE";//提⽰窗⼝的标题颜⾊
bootstrap电路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 ateElement_x_x("div");//创建⼀个div对象
bgObj.setAttribute('id','bgDiv');//可以⽤bgObj.id="bgDiv"的⽅法，是为div指定属性值bgObj.style.position="absolute";//把bgDiv这个div绝对定位
html个人网页完整代码div+cssp="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
github扒代码报错443bgObj.style.width=sWidth + "px";//宽(上⾯得到的屏幕宽度)
bgObj.style.height=sHeight + "px";//⾼(上⾯得到的屏幕⾼度)
bgObj.style.zIndex = "100";//层的z轴位置
document.body.appendChild(bgObj);
var ateElement_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%";//从左侧开始位置
p = "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";//提⽰框的⾼(上⾯定义过) Align = "center";//⽂本位置属性，居中。msgObj.style.lineHeight ="25px";//⾏间距
msgObj.style.zIndex = "101";//层的z轴位置
var ateElement_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";//字体属性
lor="white";//⽂字颜⾊
title.style.cursor="pointer";//⿏标样式
title.innerHTML="
href=\"#\">关闭
dreamweaver哪个版本好用";//显⽰的⽂字
title.οnclick=function()
{
veChild(bgObj);//移除遮罩层
veChild(msgObj);//移除提⽰框
}
document.body.appendChild(msgObj);//在body中画出提⽰框层ElementByIdx_xx_x("msgDiv").appendChild(t itle);//在提⽰框中增加标题
var ateElement_x_x("p");
txt.style.margin="1em 0";//⽂本浮动
txt.setAttribute("id","msgTxt");//为p属性增加id属性
txt.innerHTML=str;//把传进来的值赋给p属性
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写出来了下⾯那⼏⾏判断的代码，这样就可以把整个⽹页都给遮罩上了。
当把上⾯我们需要的属性都设置好以后，就⽤这句代码document.body.appendChild(bgObj)；把第⼀个半透明遮罩层给输出到屏幕上。
接下来⼜定义了⼀个div，然后还是⼀堆属性的赋值，然后这两句话很重要
document.body.appendChild(msgObj);//在body中画出提⽰框层
itle);//在提⽰框中增加标题
这是点击关闭按钮以后的处理代码
title.οnclick=function()
{
veChild(bgObj);//移除遮罩层
itle);//在提⽰框中移除标题
veChild(msgObj);//移除提⽰框
}
都很简单了，就是移除，关闭就⾏了。
分享：
喜欢0
赠⾦笔加载中，请稍候......
评论加载中，请稍候...
发评论
登录名： 密码： 回密码 注册记住登录状态
昵 称：
评论并转载此博⽂
发评论
以上⽹友发⾔只代表其个⼈观点，不代表新浪⽹的观点或⽴场。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论