有时候感觉alert提示信息过于古板,不太符合需要,那就自己东西写一个吧。先贴代码了,后面会有代码的解释。本人也是刚刚自己总结后写的,对美观方面没有功底,呵呵,就凑合用吧,以后改进。
function Button1_ {
var msgWidth=400,msgHeight=100,borderColor="#336699";
var msgSW,msgSH;
var bigLayout=document.createElement("div");
bigLayout.setAttribute("id","bigLayout");
bigLayout.style.position="absolute";
bigLayout.style.top=0;
msgSW=document.body.offsetWidth;
msgSH=document.body.offsetHeight;
bigLayout.style.width=msgSW;
bigLayout.style.height=msgSH;
bigLayout.style.filter="Alpha(opacity=50,finishOpacity=100,style=3)";
bigLayout.style.zIndex="500";
document.body.appendChild(bigLayout);
//上面是定义了一个大的div,用来将整个界面覆盖掉,Alpha是滤镜的东东,百一下就知道参数的含义了。下面就是真正要显示的div,改div有三部分组成,一是标题,二是要提示的信息,这里可以写成传入参数形式的奥。三是两个button按钮,为了实现confirm。
var msgWidth=400,msgHeight=100,borderColor="#336699";
var msgSW,msgSH;
var bigLayout=document.createElement("div");
bigLayout.setAttribute("id","bigLayout");
bigLayout.style.position="absolute";
bigLayout.style.top=0;
msgSW=document.body.offsetWidth;
msgSH=document.body.offsetHeight;
bigLayout.style.width=msgSW;
bigLayout.style.height=msgSH;
bigLayout.style.filter="Alpha(opacity=50,finishOpacity=100,style=3)";
bigLayout.style.zIndex="500";
document.body.appendChild(bigLayout);
//上面是定义了一个大的div,用来将整个界面覆盖掉,Alpha是滤镜的东东,百一下就知道参数的含义了。下面就是真正要显示的div,改div有三部分组成,一是标题,二是要提示的信息,这里可以写成传入参数形式的奥。三是两个button按钮,为了实现confirm。
var msgDiv=document.createElement("div");
msgDiv.setAttribute("id","msgDiv");
msgDiv.setAttribute("align","center");
msgDiv.style.background="white";
msgDiv.style.height=msgHeight+"px";
msgDiv.style.width=msgWidth+"px";
msgDiv.style.position="absolute";
msgDiv.style.left="50%";
msgDiv.style.marginLeft=-200;
msgDiv.style.top="50%";
msgDiv.style.marginTop=-50+document.body.scrollTop;
msgDiv.style.zIndex="501";
//支持拖动,这就不解释了,很简单的,只要看一下setCapture和releaseCapture方法就ok了
var offX,offY,flag=0;
msgDiv.onmousedown=function()
{
offX=event.x-msgDiv.style.pixelLeft;
offY=event.y-msgDiv.style.pixelTop;
flag=1;
}
msgDiv.onmousemove=function()
{
if(flag==1)
{
msgDiv.style.left=event.x-offX;
msgDiv.style.top=event.y-offY;
msgDiv.style.position="absolute";
msgDiv.setCapture();
}
}
msgDiv.onmouseup=function()
{
flag=0;
msgDiv.releaseCapture();
}
//
bigLayout.appendChild(msgDiv);
//追加标题
var newtitle=document.createElement("h4");
newtitle.setAttribute("id","msgNewTitle");
newtitle.setAttribute("align","left");
newtitle.style.background=borderColor;
newtitle.style.filter="Alpha(opacity=50,finishOpacity=100,style=1)";
newtitle.innerText="确认窗口 X";
newtitle.style.height="18px";
newtitle.style.color="black";
newtitle.style.border="1px solid #336699";
newtitle.style.padding="3px";
newtitle.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
msgDiv.appendChild(newtitle);
newtitle.style.cursor="pointer";
newtitle.onclick=function()
{
document.body.removeChild(bigLayout);
}
//第二部分,添加提示信息
var txt=document.createElement("p");
txt.style.padding="2px";
txt.innerText="this is text info";
txt.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
txt.style.color="black";
txt.style.cursor="pointer";
msgDiv.appendChild(txt);
//第三部分,还是一个div,里面包含两个button
var divButton=document.createElement("div");
divButton.style.width="100%";
// divButton.style.background="red";
divButton.setAttribute("align","center");
divButton.style.marginBottom=10;
var btConfirmY=document.createElement("<input name='btSure' id='btSure' type='button' value='确定' />");
var btConfirmN=document.createElement("<input name='btCancle' id='btCancle' type='button' value='取消' />");
btConfirmY.style.marginBottom=2;
btConfirmY.style.width=60;
btConfirmY.style.marginRight=20;
btConfirmN.style.marginBottom=2;
btConfirmN.style.width=60;
divButton.appendChild(btConfirmY);
divButton.appendChild(btConfirmN);
msgDiv.appendChild(divButton);
var txt=document.createElement("p");
txt.style.padding="2px";
txt.innerText="this is text info";
txt.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
txt.style.color="black";
txt.style.cursor="pointer";
msgDiv.appendChild(txt);
//第三部分,还是一个div,里面包含两个button
var divButton=document.createElement("div");
divButton.style.width="100%";
// divButton.style.background="red";
divButton.setAttribute("align","center");
divButton.style.marginBottom=10;
var btConfirmY=document.createElement("<input name='btSure' id='btSure' type='button' value='确定' />");
var btConfirmN=document.createElement("<input name='btCancle' id='btCancle' type='button' value='取消' />");
btConfirmY.style.marginBottom=2;
btConfirmY.style.width=60;
btConfirmY.style.marginRight=20;
btConfirmN.style.marginBottom=2;
btConfirmN.style.width=60;
divButton.appendChild(btConfirmY);
divButton.appendChild(btConfirmN);
msgDiv.appendChild(divButton);
转载于:https://blog.51cto.com/lidup/140803