用JS实现模式对话框的方法

IT乐手

于 2012-01-21 17:10:25 发布

阅读量1.6k

点赞数

分类专栏： Web 文章标签： function javascript div button filter border

本文链接：https://blog.csdn.net/lujianfeiccie2009/article/details/7213483

版权

Web 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

主要是用div层的技术实现的,　具体看下面的代码

<html>
<head>

  <script type="text/javascript" language="javascript">

  //Author:lujianfei
  //Date:2012-1-21
  function sAlert(str){
	  var msgw,msgh,bordercolor;
	  msgw=400; //The width of msg;
	  msgh=100; //The height of title of the msg
	  titleheight=25; //the height of title of msg
	  bordercolor="#336699"; //The color of the border
	  titlecolor="#99CCFF"; // The color of title

  var sWidth,sHeight;
  sWidth=document.body.offsetWidth; //网页可见区域宽：document.body.offsetWidth (包括边线的宽)
  sHeight=document.body.offsetHeight; //网页可见区域高：document.body.offsetHeight (包括边线的宽)



  ///*******************************************BgDiv******************************************///
  var bgObj=document.createElement("div");
  bgObj.setAttribute('id','bgDiv');
  bgObj.style.position="absolute";
  bgObj.style.top="0";
  bgObj.style.background="#777";
  bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
  /*
   alpha是来设置透明度的,它的基本属性是filter：alpha（opacity，finishopacity，style）.
   opacity代表透明度数,选值0-100,0是完全透明,100是不透明.
   finishopacity用来设置结束时的透明度,以达到渐变效果.取值范围也是0-100.style指渐变类型,0是无变化,1是线行渐变,2是放射渐变,3是X型渐变.
   */
  bgObj.style.opacity="0.6"; //opacity是透明度
  bgObj.style.left="0";
  bgObj.style.width=sWidth+"px";
  bgObj.style.height=sHeight+"px";
  bgObj.style.zIndex="10000"; //z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
  ///*******************************************End BgDiv****************************************


  ///*******************************************Msg******************************************///
  var msgObj=document.createElement("div");
  msgObj.setAttribute("id","msgDiv");
  msgObj.setAttribute("align","center");
  msgObj.style.background="white";
  msgObj.style.border="1px solid "+bordercolor;
  msgObj.style.position="absolute";
  msgObj.style.left="50%";
  msgObj.style.top="50%";
  msgObj.style.font="12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif";
  msgObj.style.marginLeft="-225px";
  msgObj.style.marginTop=-75+document.documentElement.scrollTop+"px"; //document.documentElement.scrollTop 获取当前页面的滚动条纵坐标
  msgObj.style.width=msgw+"px";
  msgObj.style.height=msgh+"px";
  msgObj.style.textAlign="center";
  msgObj.style.lineHeight="25px";
  msgObj.style.zIndex="10001";
  ///*******************************************End Msg**************************************///

  ///*****************************MsgTitle:Caption***********************************//
  var title=document.createElement("h4");
  title.setAttribute("id","msgTitle");
  title.setAttribute("align","right");
  title.style.margin="0";
  title.style.padding="3px";
  title.style.background=bordercolor;
  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="18px";
  title.style.font="12px Verdana,Geneva,Arial,Helvetica,sans-serif";
  title.style.color="white";
  title.style.cursor="pointer";
  title.innerHTML="Close";
  title.οnclick=function(){
   document.body.removeChild(bgObj);
   document.body.removeChild(msgObj);
  }
  ///**************************Txt********************************************//
  var txt=document.createElement("p");
  txt.style.margin="1 em 0";
  txt.setAttribute("id","msgTxt");
  txt.innerHTML=str;

  document.body.appendChild(bgObj);
  document.body.appendChild(msgObj);
           msgObj.appendChild(title);
           msgObj.appendChild(txt);
    /*
  body
    |-bgDiv
    |-msgDiv
        |-msgTxt
        |-msgtTitle
   */

  
  }
  </script>
</head>
<body>

 <input type="button" value="Click here" 
 οnclick="sAlert('hello');" />
</body>

IT乐手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS实现模式对话框的方法

主要是用div层的技术实现的,　具体看下面的代码 //Author:lujianfei //Date:2012-1-21 function sAlert(str){ var msgw,msgh,bordercolor; msgw=400; //The width of msg; msgh=100; //The height of title o
复制链接

扫一扫