注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

phperwuhan的博客

记载一个phper的历程!phperwuhan.blog.163.com

 
 
 

日志

 
 

打造自己的Javascript alert confirm对象(一)  

2010-09-06 13:09:46|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

来源:http://www.chenjiliang.com/Article/View.aspx?ArticleID=2265&TypeID=31

编写Js代码时你是否厌烦了window.alert,window.confirm所弹出来单一的对话框?
接下来的日子里,我们一起来学习利用JS来开发属于自己的js对象。嘿嘿!

老鸟请移步别处,小弟不喜欢被批:)

一、 打造自己的alert()对象

实现难点:

1、利用何种方式模仿这个提示对话框?
2、如何在弹出对话框时,使网页中其他元素不可用

思路:

问题1:如何模仿?有API可调么?如何调呢?我比较生疏,不予采用调API;这里我选择div来制作这个效果

div比较熟。大家有其他的好方法,请赐教。

问题2:如何在弹出提示对话框的时候,使其他元素不可用呢?这个问题一时比较难解决。后来被人一语点醒,利用css来解决。


OK,开工吧,其实非常简单。

第一步,先建立一个htm文件,在里面利用js创建我们的提示对话框面板。

htm代码省略,只贴js代码

打造自己的Javascript alert confirm对象(一) - phperwuhan - phperwuhan的博客复制  打造自己的Javascript alert confirm对象(一) - phperwuhan - phperwuhan的博客保存
function Msg()  {      //创建弹出对话框面板      var dvMsg = document.createElement("div");      //设未绝对定位很重要          dvMsg.style.position = "absolute";      dvMsg.setAttribute('id','msg');      dvMsg.style.width = "400px";      dvMsg.style.height = "100px";      dvMsg.style.top="40%";      dvMsg.style.left="30%";      dvMsg.style.background = "white";      dvMsg.style.border="1px solid #6699dd";      dvMsg.style.zIndex = "1112";      //添加至body中      document.body.appendChild(dvMsg);  }



OK,面板创建完毕,如果你调用该函数的话,就会发现,在页面中就会多出一个蓝色边框的块

第2步:为他添加标题栏,关闭按钮和确定按钮,以及提示图片,也是按第1步的方法做。
完毕后的代码如下。

打造自己的Javascript alert confirm对象(一) - phperwuhan - phperwuhan的博客复制  打造自己的Javascript alert confirm对象(一) - phperwuhan - phperwuhan的博客保存
function Msg(str)  {      //创建提示对话框面板      var dvMsg = document.createElement("div");      dvMsg.style.position = "absolute";      dvMsg.setAttribute('id','msg');      dvMsg.style.width = "400px";      dvMsg.style.height = "100px";      dvMsg.style.top="40%";      dvMsg.style.left="30%";      dvMsg.style.background = "white";      dvMsg.style.border="1px solid #6699dd";      dvMsg.style.zIndex = "1112";      document.body.appendChild(dvMsg);      //标题栏      var title = document.createElement("div");      title.style.position = "absolute";      title.setAttribute('id','title');      title.style.width = "400px";      title.style.height = "10px";      title.style.top= "0";          title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=100,finishOpacity=100%)";      title.style.zIndex = "1113";      title.innerHTML = "<font size='2'>提示</font>";      title.style.background = "#6699ff";            //提示图片      var imgErr = document.createElement("img");      imgErr.src = "pic/err.gif";      imgErr.style.marginLeft = "15px";      imgErr.style.marginTop = "30px";      imgErr.style.position = "absolute";            //关闭图片      var imgClo = document.createElement("img");      imgClo.src = "pic/delete.gif";      imgClo.style.marginLeft = "378px";      imgClo.style.marginTop = "0px";      imgClo.style.position = "absolute";      imgClo.style.zIndex = "1115";      imgClo.style.cursor = "hand";      imgClo.onclick = function ()      {          document.body.removeChild(dv);          document.body.removeChild(dvMsg);          }      //确定按钮      var btn = document.createElement("input");      btn.id = "ok";      btn.type= "button";      btn.value = "确  定";      btn.style.marginTop = "75px";      btn.style.marginLeft = "43%";      btn.style.position = "absolute";      btn.style.border = "1px solid #6699ff";      btn.style.background = "lightblue";      //点击关闭      btn.onclick = function ()            {              document.body.removeChild(dv);              document.body.removeChild(dvMsg);            }              //响应回车            btn.onkeydown = function ()            {              if (event.keyCode == "13")              {                  document.body.removeChild(dv);                  document.body.removeChild(dvMsg);              }            }      var msg = document.createElement("div");      msg.style.marginTop = "30px";      msg.style.marginLeft = "18%";      msg.style.position = "absolute";      msg.style.width = "300px";      msg.innerHTML = str;            msg.style.wordWrap = "break-word";      document.getElementById('msg').appendChild(msg);      document.getElementById('msg').appendChild(btn);      document.getElementById('msg').appendChild(imgErr);      document.getElementById('msg').appendChild(imgClo);      document.getElementById('msg').appendChild(title);               document.getElementById('ok').focus();  }


 
OK 现在调用这个函数,是不是我们自己的提示对话框就出来了??

可是细心的您肯定又会发现,不对啊,window.alert弹出后,它后面的元素都不可用啊,那我们就进一步完善它吧
其实很简单,添加一个层,遮住它
在JS代码中添加下列代码

打造自己的Javascript alert confirm对象(一) - phperwuhan - phperwuhan的博客复制  打造自己的Javascript alert confirm对象(一) - phperwuhan - phperwuhan的博客保存
/*      Copyright by:LRH http://hunanboy.cnblogs.com              */       //确定遮罩层的高度,宽度      var h = screen.availHeight;      var w = screen.availHeight;      //创建遮罩层,它的主要作用就是使网页中的其他元素不可用。      var dv = document.createElement("div");      dv.setAttribute('id','bg');      //设置样式      dv.style.height = h + "px";      dv.style.width = w + "px";      dv.style.zIndex = "1111";      dv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=2,opacity=1,finishOpacity=100%)";      dv.style.background = "red";      dv.style.top = 0;      //设为绝对定位很重要      dv.style.position = "absolute";      //将该元素添加至body中      document.body.appendChild(dv);


好啦,运行界面就是下面这个样子的。下一节制作confirm对象

单击显示全图,Ctrl+滚轮缩放图片


申明:本文章代码未经过任何测试,本系列随笔为原创,转载请注明。

  评论这张
 
阅读(485)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017