JS实现DIV提示框的效果

最新推荐文章于 2019-01-24 09:50:12 发布

转载最新推荐文章于 2019-01-24 09:50:12 发布 · 1.2k 阅读

文章标签：

#div #function #callback #javascript #html

Javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript创建自定义对话框的方法，包括如何通过JavaScript控制对话框的显示、位置以及如何响应用户的操作等。此外，还演示了如何通过拖动标题栏来移动对话框。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

//获取ID

function $id(id){

return document.getElementById(id);

}

function ShowMsg(){

document.writeln("<div id="msgdiv" style="position:absolute;display:none;border:2px solid #AFCEF9;"></div>");

document.writeln("<div id="overdiv" style="position:absolute;display:none;">");

document.writeln("</div>");

//回调函数

this.ok_callback=function(){};

this.cancel_callback=function(){};

this.msgobjname=""

this.show=function(msgtitle,msgcontent,selecttype){

var tempobj1=$id("msgdiv");

var tempobj2=$id("overdiv");

var msgobj=this.msgobjname;

tempobj2.style.filter="alpha(opacity=75)";

tempobj2.style.MozOpacity = 75/100;

tempobj2.style.backgroundColor = "#000000";

tempobj2.style.display = '';

tempobj2.style.zIndex= 100;

tempobj2.style.height= document.documentElement.clientHeight+"px";

tempobj2.style.width= document.documentElement.clientWidth+"px";

tempobj2.style.left=0;

tempobj2.style.top=0;

tempobj1.style.display="none";

tempobj1.style.left= (document.documentElement.clientWidth)/3+"px";

tempobj1.style.top= (document.documentElement.scrollTop+(document.documentElement.clientHeight)/3)+"px";

tempobj1.style.display= '';

tempobj1.style.width=400+"px";

tempobj1.style.height=300+"px";

tempobj1.style.zIndex= 200;

tempobj1.style.backgroundColor = "#CDDAF1";

var OutStr;

OutStr="<div style="font-weight:bolder;text-align:center;height:20px;font-size:14px;background-color:#6088D2;cursor:move" canmove="true" forid="msgdiv">"+msgtitle+"</div>"

OutStr=OutStr+"<div style="height:200px;text-align:center;font-size:12px;">"+msgcontent+"</div>"

if(selecttype==1){

OutStr=OutStr+"<div style="text-align:center;font-size:12px;"><input type="button" value="确定" onclick=""+msgobj+".ok()"> <input type="button" value="取消" onclick=""+msgobj+".cancel()"></div>"

}

else if(selecttype==2){

OutStr=OutStr+"<div style="text-align:center;font-size:12px;"><input type="button" value="确定" onclick=""+msgobj+".ok()"></div>"

}

tempobj1.innerHTML=OutStr;

var md=false,mobj,ox,oy

document.onmousedown=function(ev)

{

var ev=ev||window.event;

var evt=ev.srcElement||ev.target;

if(typeof(evt.getAttribute("canmove"))=="undefined")

{