老杂毛博客
  青青子衿,悠悠我心。但为君故,沉吟至今。
博客首页 | 人生历程 | 编程开发 | 机关门  
  文章分类
 
博客首页 > 软件网络编程 > 文章正文

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

2009/12/27 17:32:09
 

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

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

 #lt;a href="#" onclick="sAlert('#lt;a href=http://www.laozamao.com#gt;测试效果#lt;/a#gt;');"#gt;点击测试#lt;/a#gt;

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

#lt;script type="text/javascript" language="javascript"#gt;

          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 (window.innerHeight && window.scrollMaxY)
      {   
       sHeight = window.innerHeight + window.scrollMaxY;
      }
      else if (document.body.scrollHeight #gt; document.body.offsetHeight)
      { 
        sHeight = document.body.scrollHeight;
      }
      else
      { 
       sHeight = document.body.offsetHeight;
      }//以上得到整个屏幕的高

     var bgObj=document.createElement("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.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie浏览器透明度设置
     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("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("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.Microsoft.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="#lt;a href=\"#\"#gt;关闭#lt;/a#gt;";//显示的文字
     title.onclick=function()
    {
      document.body.removeChild(bgObj);//移除遮罩层
      document.getElementById("msgDiv").removeChild(title);//在提示框中移除标题
      document.body.removeChild(msgObj);//移除提示框
    }
    document.body.appendChild(msgObj);//在body中画出提示框层
    document.getElementById("msgDiv").appendChild(title);//在提示框中增加标题
    var txt=document.createElement("p");
    txt.style.margin="1em 0";//文本浮动
    txt.setAttribute("id","msgTxt");//为p属性增加id属性
    txt.innerHTML=str;//把传进来的值赋给p属性
    document.getElementById("msgDiv").appendChild(txt);//把p属性增加到提示框里
            }
         #lt;/script#gt;

 

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

我这里讲几个重要的地方,第一:

     //sHeight=screen.height;//得到当前屏幕的高
     //sHeight=document.body.clientHeight;//BODY对象高度
         if (window.innerHeight && window.scrollMaxY)
      {   
       sHeight = window.innerHeight + window.scrollMaxY;
      }
      else if (document.body.scrollHeight #gt; document.body.offsetHeight)
      { 
        sHeight = document.body.scrollHeight;
      }
      else
      { 
       sHeight = document.body.offsetHeight;
      }//以上得到整个屏幕的高

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

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

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

    document.body.appendChild(msgObj);//在body中画出提示框层
    document.getElementById("msgDiv").appendChild(title);//在提示框中增加标题

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

     title.onclick=function()
    {
      document.body.removeChild(bgObj);//移除遮罩层
      document.getElementById("msgDiv").removeChild(title);//在提示框中移除标题
      document.body.removeChild(msgObj);//移除提示框
    }

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

好了,差不多都解释全了。如果你感觉对你有帮助了,别忘了留言谢谢我,最近写文章总是没人留言,没啥动力了,囧。。。。

阅读: (9879)  评论(22)  
 
网友评论:
 
 1.匿名网友2009/12/31 14:40:18 
呵呵,不錯
偶然百度搜索JS獲取地址欄參數進來的。
感覺你和我很像,呵呵
 2.匿名网友2009/12/31 15:24:39 
注视很详细啊,学习了,以前总想实现一个这样的功能,一直找不到合适的代码,谢谢你。
 3.匿名网友2010/1/8 12:04:50 
哈哈,不错,帮助很大.
继续,加油!
 4.匿名网友2010/1/8 12:05:04 
Microsoft OLE DB Provider for ODBC Drivers 错误 ''80040e14'' 

[Microsoft][ODBC Microsoft Access Driver] 日期的语法错误 在查询表达式 ''info_id=10450#pl'' 中。 

/Contents.asp,行 50 
 5.天道酬勤2010/1/8 12:21:37 
回复 6 楼 谢谢提醒。
 6.匿名网友2010/4/21 18:50:41 
good
 7.匿名网友2010/4/30 12:01:03 
非常感谢您,通过您的代码,可改造成类似弹出窗口,并且可以在这个小窗口里面增加相应的html代码。如果继续改造,可以将增加、修改都在同一个页面中完成了。
 8.匿名网友2010/5/7 13:03:25 
顶!!!!!!!!!!!!!!!太美了,哥们
小生佩服!多写些东西出来分享下,谢谢哈哈
 9.匿名网友2010/9/7 16:12:17 
so good  借用了
 10.60.208.23.102010/9/30 15:03:44 
恩。挺好的谢谢了
 11.222.247.82.982010/10/8 11:49:19 
大哥啊
你有没试过连续点击“点击测试”啊
 12.222.247.82.982010/10/8 11:50:01 
ie里面还有小小问题了
 13.222.247.82.982010/10/8 11:52:23 
我用ietester测试的时候出现连续点击连续出现弹出框
能不能改进一下啊
我现在也出现这个问题,就是没能解决
 14.yfcyan2010/10/12 16:48:43 
<B>相当滴感谢!</B>
 15.125.33.5.132010/10/27 23:57:36 
好的
 16.11648577752010/12/18 23:40:23 
太感谢了
真这个效果很久了
多谢多谢!
 17.11648577752010/12/18 23:42:08 
[yingyong][i][b]引用:[/b]11楼  [b]222.247.82.98[/b][/i]  大哥啊
你有没试过连续点击“点击测试”啊[/yingyong]
呵呵
确实有问题
老大能解决下吗?
 18.218.94.37.1972011/3/8 8:59:16 
注释很详细,学习中
 19.218.242.250.262011/3/21 11:50:29 
你可以在做些改进,让DIV可以随滚动条走这样就更好
 20.125.78.12.742011/11/6 22:21:02 
不错,值得学习
 21.2016/5/13 21:15:16 
 
相关文章:
 微信支付asp.net V3.3.7 sys
 ERRORLOG 文件太大的处理办法
 Attempted to read or w
 Ctrl键自动按下,Ctrl键和Alt总感觉
 解决 Your project contai
 adb install 多设备id号一样,如
 如何去掉优酷,土豆等网站的广告?
 webview的loadData方法加载乱码
 让iis7支持apk文件下载
 sql利用游标循环,遍历表循环结果集
 
 
     
联系作者: QQ: 657603425 Email: [email protected]
Copyright © 2007-2014 www.laozamao.com All Rights Reserved
京ICP备09002242号 北京海淀分局备案号:1101084842