动态生成DIV

最新推荐文章于 2023-10-02 09:08:07 发布

原创最新推荐文章于 2023-10-02 09:08:07 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#div #object #function #table #null #filter

本文介绍了一个使用纯JavaScript实现的自定义对话框功能。该方法通过动态创建并操作DOM元素来展示一个包含指定URL内容的弹窗，同时具备基本的样式调整和交互功能。

function showDialog(url,width,height)

{

if(document.getElementById("showdiv")!=null&&document.getElementById("headdiv")!=null)

{

var head = document.getElementById("headdiv");

var obj = document.getElementById("showdiv");

var cover = document.getElementById("cover");

obj.parentNode.removeChild(obj);

head.parentNode.removeChild(head);

cover.parentNode.removeChild(cover);

}

var newNode2 = new Object();

var newNode2 = document.createElement("div");

newNode2.setAttribute("id","cover");

document.getElementById("tt").insertAdjacentElement("beforeBegin",newNode2);

var ifr = document.getElementById("cover");

ifr.style.position = "absolute";

ifr.style.left = "0px";

ifr.style.top = "0px";

ifr.style.height = "100%";

ifr.style.width = "100%";

ifr.style.zIndex = "1001";

var select= document.getElementsByTagName("select");

for (var i=0;i<select.length;i++)

{

select[i].disabled = true;

}

//ifr.style.background = "green";

ifr.innerHTML ="<iframe allowTransparency ='true' style='FILTER:gray Alpha(opacity=5);BACKGROUND-COLOR:green; VISIBILITY: inherit; WIDTH: 100%; BORDER-COLLAPSE: collapse; HEIGHT: 100%;' src='../../Empty.aspx' frameBorder=''></iframe>";

//生成内容层

var newNode = new Object();

newNode = document.createElement("div");

newNode.setAttribute("id","showdiv");

document.getElementById("tt").insertAdjacentElement("beforeBegin",newNode);

var div = document.getElementById("showdiv");

div.style.position = "absolute";

div.style.width = width;//448

div.style.height = height;//140

div.style.zIndex = "1001";

//居中定位

div.style.left = (window.screen.width-width)/2;

div.style.top = (window.screen.height-height-230)/2;

div.innerHTML = "<iframe style=' VISIBILITY: inherit; WIDTH: 100%; BORDER-COLLAPSE: collapse; HEIGHT: 100%' src='" +url+"' frameBorder='no'></iframe>";

//生成标题头层

var newNode1 = new Object();

var newNode1 = document.createElement("div");

newNode1.setAttribute("id","headdiv");

document.getElementById("tt").insertAdjacentElement("beforeBegin",newNode1);

var headdiv = document.getElementById("headdiv");

headdiv.style.position = "absolute";

headdiv.style.width = width

headdiv.style.height = "25px";

headdiv.style.zIndex = "1001";

headdiv.onmousedown = function(){dargit(headdiv,div,event);}

//居中定位

headdiv.style.left = (window.screen.width-width)/2;

headdiv.style.top = (window.screen.height-height-230)/2-20;

headdiv.innerHTML = "<table border='0' width='"+width+"' cellpadding='0' style='BORDER-COLLAPSE: collapse' id='table3'>"+

"<tr><td colspan='3'><table border='0' width='100%' cellpadding='0' background='../../Images/divcenter.gif' style='BORDER-COLLAPSE: collapse' id='table2'><tr><td width='22'>"+

"<img border='0' src='../../Images/divleft.gif' width='22' height='20'></td><td width='100%'></td>"+

"<td width='22' style='CURSOR: hand' onclick='close_without_refresh();'><img border='0' width='22' height='20' id='divright' src='../../Images/divright.gif'></td></tr></table></td></tr></table>";

}