动态弹出层

Question

弹出一个DIV 用图片档住，图片用灰色的。DIv里面加入Iframe 就可以导入页面了。

Answer 1

楼上正解，你看下面这个：
// JScript 文件
var msg="这里是测试消息提示窗口！";
var TITLE_TEXT="消息提示";//默认标题
var CLOSE_TEXT="确定";
var WIDTH=400;//宽度
var HEIGHT=110;//高度
var TITLEHEIGHT=20;//默认标题
var BORDERCOLOR="#336699";//边框颜色
var TITLECOLOR="#99CCFF";//标题颜色function ShowMsg(str1,str2) {
    if(str1!=null)
        msg=str1;
    if(str2!=null)
        TITLE_TEXT=str2;    var sWIDTH=document.body.offsetWidth;//浏览器工作区域内页面宽度
    var sHEIGHT=screen.Height;//屏幕高度
    
    var bgObj=document.createElement("div");//遮罩层
    bgObj.setAttribute('id','bgDiv');
    bgObj.style.position="absolute";
    bgObj.style.top="0";
    bgObj.style.background="#777777";
    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
    bgObj.style.opacity="0.6";
    bgObj.style.left="0";
//    bgObj.style.width=sWIDTH+"px";
//    bgObj.style.height=sHEIGHT+"px";
    bgObj.style.width="100%";
    bgObj.style.height="100%";
    bgObj.style.zIndex="10000";
    document.body.appendChild(bgObj);//
    
    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="40%";
    msgObj.style.font="12px Verdana,Geneva,Arial";
    msgObj.style.marginLeft="-225px";
    msgObj.style.marginTop=-75+document.documentElement.scrollTop+"px";
    msgObj.style.width=WIDTH+"px";
    msgObj.style.height=HEIGHT+"px";
    msgObj.style.textAlign="center";
    msgObj.style.lineHeight="25px";
    msgObj.style.zIndex="10001";
    document.body.appendChild(msgObj);
    
    var title=document.createElement("h4");//标题
    title.setAttribute("id","msgTitle");
    title.setAttribute("align","left");
    title.style.cursor="default";
    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=100,finishOpacity=75);";
    title.style.opacity="0.75";
    title.style.border="1px solid "+BORDERCOLOR;
    title.style.height=TITLEHEIGHT+"px";
    title.style.font="14 px Verdana,Geneva,Arial";
    title.style.color="white";
    title.innerHTML=TITLE_TEXT;
    document.getElementById("msgDiv").appendChild(title);
        
    var closebtn=document.createElement("div");//右上角关闭按钮
    closebtn.innerHTML=" × ";
    closebtn.style.right="0";
    closebtn.style.top="0";
    closebtn.style.position="absolute";
    closebtn.style.zIndex="10002";
    closebtn.style.cursor="pointer";
    closebtn.style.font="18 px Verdana,Geneva,Arial";
    closebtn.style.color="white";
    closebtn.onclick=Close;
    function Close() {
        document.body.removeChild(bgObj);
        document.body.removeChild(msgObj);
    }
    document.getElementById("msgDiv").appendChild(closebtn);
    
    var text=document.createElement("p");
    text.style.margin="1em 0";
    text.setAttribute("id","msgTxt");
    text.innerHTML=msg;
    text.style.cursor="default";
    document.getElementById("msgDiv").appendChild(text);
    
    var closebtn2=document.createElement("input");//关闭按钮
    closebtn2.setAttribute("value",CLOSE_TEXT);
    closebtn2.setAttribute("type","button");
    closebtn2.style.position="absolute";
    closebtn2.style.left="45%";
    closebtn2.style.bottom="3px";
    closebtn2.style.width="60px";
    closebtn2.style.border=BORDERCOLOR+" 1px solid";
    closebtn2.style.filter="FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde)";
    //closebtn2.style.backgroundColor=BORDERCOLOR;
    closebtn2.style.padding="2px 3px 0px 3px";
    closebtn2.onclick=Close;
    document.getElementById("msgDiv").appendChild(closebtn2);
    bgObj.focus();
}function $(obj)
{
    return document.getElementById(obj);
}

Answer 2

正解，并且可以跟Iframe页面交互

Answer 3

function ShowMsg(str1,str2) 这个函数能打开指定的页面吗？传入的参数一个是页面的标题，一个是页面的内容哦

Answer 4

var SmartPanel = function()
{
var currentObj = this;
this.open = function(iTop,iLeft,iWidth, iHeight, sUrl, sTitle){
    var iIeWidth = window.screen.width;
    var iIeHeight = window.screen.height;
     
    var strHtml = //"<div class=\"x-ie-shadow\" id=\"Ext-shadow-gen9999\" style=\"display: block; z-index: 9002; filter: progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius=4); left:"+(iLeft -5) + "px; width:" +(iWidth +1) + " px; top:" +(iTop -5)+ "px; height:" +(iHeight +58)+"px\"></div>" +
                  "<div class=\"x-window x-window-plain x-resizable-pinned \" id=\"Ext-window-panel-gen88\" style=\"display: block;cursor:move;z-index: 9003; left:" +iLeft+" px; visibility: visible; width:" +iWidth+" px; zoom: 1; position: absolute;top:"+ iTop +"px;\">" +
                  "<div class=\"x-window-tl\"><div class=\"x-window-tr\"><div class=\"x-window-tc\">" +
                  "<div class=\"x-window-header x-unselectable\" id=\"ext-gen8\" style=\"mozuserselect: none;khtmluserselect: none\" unselectable=\"on\">" +
                  "<div class=\"x-tool x-tool-close\" id=\"ext-gen60\" onclick =\"CloseWindow()\">&nbsp;</div><span class=\"x-window-header-text\" id=\"ext-gen33\">" +sTitle+"</span></div></div></div></div>" +
                  "<div class=\"x-window-bwrap\" id=\"ext-gen9\" style=\"width:" +iWidth+" px\"><div class=\"x-window-ml\"><div class=\"x-window-mr\"><div class=\"x-window-mc\" style=\"width:" +(iWidth -27)+"px\">" +
                  "<div class=\"x-window-body\" id=\"ext-gen10\" style=\"padding-right: 5px; padding-left: 5px;padding-bottom: 5px; width:" +(iWidth -27)+" px; padding-top: 5px; height:" +(iHeight) +"px\">" +
                  "<div class=\"x-plain x-form-label-left\" id=\"ext-comp-1001\" style=\"width:" +(iWidth -27)+ "px\"><div class=\"x-plain-bwrap\" id=\"ext-gen67\" style=\"width:" +(iWidth -27) +"px\">" +
                  "<iframe id=\"ext-gen888\" scrolling =\"auto\" src=\"" +sUrl +"\" frameborder=\"0\" style=\"width:" +(iWidth -27)+"px; height:" +(iHeight) +"px\"></iframe></div></div></div></div></div></div>"+
            "<div class=\"x-window-bl\">" +
                "<div class=\"x-window-br\">" + 
                    "<div class=\"x-window-bc\">" +
                        "<div class=\"x-window-footer\" id=\"ext-gen11\">" +
                            "<div class=\"x-panel-btns-ct\"><div class=\"x-panel-btns x-panel-btns-center\"><div class=\"x-clear\"></div></div></div></div></div></div></div></div></div>";
    document.body.insertAdjacentHTML("afterBegin",strHtml);
    document.onClose1= CloseWindow; 
    locking_under_div(true);
    //currentObj.drag("Ext-window-panel-gen88");
    currentObj.SmartPanel_moveStart("Ext-window-panel-gen88");
    }
    
    //拖动div
  this.SmartPanel_moveStart= function(obj){
       var oObj=document.getElementById(obj);
       oObj.onmousedown=function(){
          oObj.setCapture ? oObj.setCapture() : function(){};
  var oEvent = window.event ? window.event : event;
  var dragData = {x : oEvent.clientX, y : oEvent.clientY};
  var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)}; 
  oObj.onmousemove=function(){
      var oEvent = window.event ? window.event : event;
   var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
   var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
   oObj.style.left = iLeft;
   oObj.style.top = iTop;
   dragData = {x: oEvent.clientX, y: oEvent.clientY};   
  }
  oObj.onmouseup =function(){
     var oEvent = window.event ? window.event : event;
    oObj.onmousemove = null;
oObj.onmouseup = null;
if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
    oObj.style.left = backData.y;
    oObj.style.top = backData.x;
    }
oObj.releaseCapture ? oObj.releaseCapture() : function(){};
  }
       }
  } 
}
function CloseWindow()
{

if (document.onClosePanel != "undefined")
    {
     try{
         var bClose = document.onClosePanel();
         if (!bClose)return ;
        }catch(ex){}
           
    }   
    oDiv = document.getElementById("Ext-window-panel-gen88");
    oDiv2 =oDiv.parentNode;    oDiv2.removeChild(oDiv);   locking_under_div(false);
}
function locking_under_div(isLocked){  
if(isLocked){
var divObj = {};
var divObj = document.getElementById("lockingUnderDiv");
if(divObj == null){
divObj = document.createElement("div");
}
divObj.id = "lockingUnderDiv";
divObj.style.position="absolute";
divObj.style.top="0px";
divObj.style.filter = 'alpha(opacity=40)';
divObj.style.backgroundColor = "#777";
divObj.style.zIndex = 1;
divObj.style.left ="0px";
divObj.style.display="block";
divObj.style.width = top.document.body.clientWidth;   
divObj.style.height = top.document.body.clientHeight-77; 
document.body.appendChild(divObj);//body里添加元素
}else{
var divObj = document.getElementById("lockingUnderDiv");
divObj.style.display = "none";
}
}

Answer 5

var top = (document.body.clientHeight-572)/2;
var left = (document.body.clientWidth-400)/2;
new SmartPanel().open(top,left,400,350,'sUrl','title');
这样调用，试一下，不过我这关闭B层时页面有刷新

Answer 6

top.document.body.clientWidth;  这行有错误

Answer 7

只是给个例子的，想要在层中显示虽的页面，就要用iframe了

Answer 8

很不错！在动态的div中能嵌套input标签吗?怎么实现呀！

Answer 9

javascripot div登陆提示框(页面层不可用):http://blog.csdn.net/chinmo/archive/2008/04/20/2308911.aspx如果DIV里是页面，那请用iframe