`
busing
  • 浏览: 41499 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

让页面弹出另一个页面的通用方法

阅读更多
//    动态创建可移动div
     
     var vIndex =9999;
     
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var move_obj_x0=0,move_obj_y0=0,move_obj_x1=0,move_obj_y1=0;    //(x0,y0)为开始拖动时鼠标的位置(x1,y1)为开始拖动时对象的位置 
    var obj_moveable=false;                                         //定义DIV是否可移动的标志
    var returnValue =null;
    
//    开始拖动; 
    function startMove(obj) 
    {
        if(event.button==1) 
        { 
            obj.setCapture();
            move_obj_x0 = event.clientX; 
            move_obj_y0 = event.clientY; 
            move_obj_x1 = parseInt(obj.style.left); 
            move_obj_y1 = parseInt(obj.style.top); 
            obj_moveable = true;
        } 
    }
    
//    拖动; 
    function Moving(obj) 
    { 
        if(obj_moveable) 
        {
            obj.style.left = (move_obj_x1 + event.clientX - move_obj_x0>0)?move_obj_x1 + event.clientX - move_obj_x0:0; 
            obj.style.top = (move_obj_y1 + event.clientY - move_obj_y0>0)?move_obj_y1 + event.clientY - move_obj_y0:0; 
        } 
    }
    
//    停止拖动; 
    function stopMove(obj) 
    { 
        if(obj_moveable) 
        { 
            obj.releaseCapture(); 
            obj_moveable = false;
            move_obj_x1 = parseInt(obj.style.left); 
            move_obj_y1 = parseInt(obj.style.top);
        }
    }
    
//    动态创建div
//    title 标题
//    ico 显示的图标,可为null
//    url div里嵌入的iframe地址
//    w宽度
//    h高度
//    havMask 是否有屏蔽膜(0:无)
    function CreateDivFrm(title,ico,url,w,h,havMask)
    {
        if(havMask !=0)
        {
            PopMaskLayer();
        }
        
        vIndex =vIndex +2;
        
        var htmlStr,divCount;

        var divObj=document.createElement("div");
        var countObj=document.getElementById("countObj") ;
  	    var formObj=document.forms[0];
  	    
        if(ico==null)
        {
          ico="../images/ico/folderopen.gif";
        }
        
        if( formObj == null)    
	    {	 
	       alert("◎参数错误!(没有指定的表单form)");
	       return;
        }
      
  	    if( countObj == null)  
  	    {
		    var countObj=document.createElement("input");
	        countObj.type="hidden";
	        countObj.id="countObj";
	        countObj.value=1;
	        formObj.appendChild(countObj);
	        divCount = 1
	    }    
	    else
	    {   
	         divCount=parseInt(countObj.value) + 1 ;
	         countObj.value=divCount;
	    } 
	    
        w =typeof w!="undefined" ?w:( w !=null ? w : 406);      //容器中内容部分的实际高度
        h =h< 50 ?50 : (h +50);                                 //其中50表示页面中的操作区域
        h =typeof h!="undefined" ?h:( h !=null ? h : 150);      
        w1 =w+2;                                                //主容器(外围DIV)的宽度                                            
        w2=w1 - 10; //容器顶部DIV自适应宽度
        h=h + 15;
        
        var urlStr = new String();
        urlStr =url;
 
        if(urlStr.indexOf("?")>=0)
        {
           urlStr = urlStr + "&divFrmID=divfrm" + divCount ; 
        }
        else
        {
            urlStr = urlStr + "?divFrmID=divfrm" + divCount ; 
        }
        
        htmlStr = "<div id='divfrm" + divCount + "' style='POSITION: absolute;width:" + w1 + "px;z-index:" + vIndex + ";' onmousedown=startMove(this) onmouseup =stopMove(this) onmousemove=Moving(this) >";
//        htmlStr = htmlStr + "<div style='width:100%;'>";
//        htmlStr = htmlStr + "   <div class='fLeft dialogLeft'></div>";
//        htmlStr = htmlStr + "   <div id='dMiddle" + divCount + "' class='fLeft dialogMiddle' style='width:" + w2 + "px'>";
//        htmlStr = htmlStr + "       <div class='fLeft tPaddingLeft'>";
//        htmlStr = htmlStr + "           <img src='" + ico + "' style='vertical-align:middle;' alt='双击这关闭此窗口' ondblclick=delDivFrm('divfrm" + divCount + "') />&nbsp;<font color='white'>" + title + "</font>";
//        htmlStr = htmlStr + "       </div>";
//        htmlStr = htmlStr + "       <div class='fRig tPaddingRight'>"
//        htmlStr = htmlStr + "           <img src='../images/ico/close1.gif'  alt='' id='imgbbsdiv' onclick=delDivFrm('divfrm" + divCount + "') />"
//        htmlStr = htmlStr + "       </div>"
//        htmlStr = htmlStr + "   </div>";
//        htmlStr = htmlStr + "   <div class='fLeft dialogRight'></div>";
//        htmlStr = htmlStr + "</div>";
//        htmlStr = htmlStr + "<div style='width:100%;'>";
//        htmlStr = htmlStr + "   <div id='dMain" + divCount + "' class='dialogMain' style='width:" + w + "px;height:1px;'>";
//        htmlStr = htmlStr + "       <iframe id='frm" + divCount + "' name='frm" + divCount + "' src='" + urlStr + "' scrolling='no' frameborder='0' style='width:100%;height:" + h + ";' onload='AutoOnloadIframe(" + divCount + ");'></iframe>";
//        htmlStr = htmlStr + "   </div>";
//        htmlStr = htmlStr + "</div>";
   htmlStr = htmlStr + "<table cellpadding='0' cellspacing='0' width='" + w1 + "' >";
   htmlStr = htmlStr + "     <tr>";
   htmlStr = htmlStr + "         <td width='5'  id='dMiddle" + divCount + "'><img style='display:block;' src='top_left.gif'/></td>";
   htmlStr = htmlStr + "         <td style='background-image:url(../images/dialognew/top.gif);'>";
   htmlStr = htmlStr + "         <table width='" + w2 + "' cellpadding='0' cellspacing='0'>";
   htmlStr = htmlStr + "             <tr>";
   htmlStr = htmlStr + "                 <td valign='middle' style='color:White;font-size:14px;font-weight:bold;'>&nbsp;<img src='folder.gif' style='vertical-align:middle;' alt='双击这关闭此窗口' ondblclick=delDivFrm('divfrm" + divCount + "') />&nbsp;" + title + "</td>";
   htmlStr = htmlStr + "                 <td align='right'><img src='close.gif' onclick=delDivFrm('divfrm" + divCount + "') />&nbsp;</td>";
   htmlStr = htmlStr + "             </tr>";
   htmlStr = htmlStr + "         </table>";
   htmlStr = htmlStr + "         </td>";
   htmlStr = htmlStr + "         <td width='5'><img style='display:block;' src='top_right.gif'/></td>";
   htmlStr = htmlStr + "     </tr>";
   htmlStr = htmlStr + " </table>";
   htmlStr = htmlStr + " <table cellpadding='0' cellspacing='0' width='" + w1 + "'>";
   htmlStr = htmlStr + "     <tr>";
   htmlStr = htmlStr + "         <td style='background-image:url(../images/dialognew/left.gif);' width='5'></td>";
   htmlStr = htmlStr + "         <td style='background-color:white;' width='" + w2 + "' >";
   htmlStr = htmlStr + "             <table cellpadding='0' cellspacing='0' width='" + w2 + "'>";
   htmlStr = htmlStr + "                 <tr>";
   htmlStr = htmlStr + "                     <td style='padding:0px;overflow:auto; '   id='dMain" + divCount + "'>";
   htmlStr = htmlStr + "                        <iframe id='frm" + divCount + "' name='frm" + divCount + "' scrolling='yes' src='" + urlStr + "' width='" + w2 + "'  frameborder='0' style='width:100%;height:" + h + ";' onload='AutoOnloadIframe(" + divCount + ");'></iframe>";
   htmlStr = htmlStr + "                     </td>";
   htmlStr = htmlStr + "                 </tr>";
   htmlStr = htmlStr + "                 <tr>";
   htmlStr = htmlStr + "                     <td style='background-image:url(../images/dialognew/bottom_content.gif);height:4px;padding-left:0px;' align='right'></td>";
   htmlStr = htmlStr + "                 </tr>";
   htmlStr = htmlStr + "             </table>";
   htmlStr = htmlStr + "         </td>";
   htmlStr = htmlStr + "         <td style='background-image:url(../images/dialognew/right.gif);' width='5'></td>";
   htmlStr = htmlStr + "     </tr>";
   htmlStr = htmlStr + " </table>";
   htmlStr = htmlStr + " <table cellpadding='0' cellspacing='0' width='" + w1 + "'>";
   htmlStr = htmlStr + "     <tr>";
   htmlStr = htmlStr + "         <td width='5'><img style='display:block;' src='bottom_left.gif'/></td>";
   htmlStr = htmlStr + "         <td style='background-image:url(../images/dialognew/bottom.gif);background-color:#F0F0F0;'><img style='display:block;' src='spacer.gif' height='4' width='" + w2 + "' /></td>";
   htmlStr = htmlStr + "         <td width='5'><img style='display:block;' src='bottom_right.gif'/></td>";
   htmlStr = htmlStr + "     </tr>";
   htmlStr = htmlStr + " </table>";
        htmlStr = htmlStr + "</div>";
 
        divObj.innerHTML = htmlStr ;
 
        formObj.appendChild (divObj);
        
        InitDivPosition(h,w,divCount);
    }
    
//    自动加载DIV的位置(居屏幕的最中间)
    function InitDivPosition(objHeight, objWidth, divCount)
    {
        var n =divCount -1;       //用于层叠式显示多个DIV ,以28个像素为距
        var clientHeight =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? document.documentElement.clientHeight : document.body.clientHeight;
        var clientWidth =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? document.documentElement.clientWidth : document.body.clientWidth;
        var paraTop =(clientHeight)/2-objHeight>=0 ? (clientHeight)/2 - objHeight + n * 28 : n * 28;
        var paraLeft =(clientWidth)/2 - objWidth/2 + n * 28;
        
        var divID ="divfrm" + divCount;
        var objDiv =document.getElementById(divID);
        
//        获得页面被滚动条卷去的高度(若文档有了标准DTD声明,则高度需通过documentElement属性获取)
        var scrollPos; 
        if (typeof window.pageYOnuffset != 'undefined')
        { 
            scrollPos = window.pageYOffset; 
        } 
        else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
        { 
            scrollPos = document.documentElement.scrollTop; 
        } 
        else if (typeof document.body != 'undefined')
        { 
            scrollPos = document.body.scrollTop; 
        }
        
        objDiv.style.top =scrollPos + paraTop;
        objDiv.style.left =paraLeft;
    }
    
//    自适应Iframe的高度 [注:如果用户自定义了高度,则以自定义的高度为准!宽度暂时不控制 ]
    function AutoOnloadIframe(divCount)
    {
        eval("var frmObj =frm" + divCount);
        var RealHeight =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? frmObj.document.documentElement.scrollHeight : frmObj.document.all.dialogBody.scrollHeight;
        var RealWidth =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? frmObj.document.documentElement.scrollWidth : frmObj.document.all.dialogBody.scrollWidth;
        
       // eval("document.all.frm" + divCount + ".style.height=RealHeight");
       // eval("document.all.frm" + divCount + ".style.width=RealWidth");
        
        eval("document.all.divfrm" + divCount + ".style.width =RealWidth + 2;");
      //  eval("document.all.dMiddle" + divCount + ".style.width =RealWidth -6;");
      //  eval("document.all.dMain" + divCount + ".style.width =RealWidth");
    }
        
//    删除该DIV标签
    function delDivFrm(id)
    {
        var targetObj=document.getElementById(id);
	    if (targetObj ==null) 
		    alert("对象为空");
	    else
	    {
            targetObj.outerHTML="";
            document.body.removeChild(document.getElementById("MaskLayer"));
        }
}

 

分享到:
评论

相关推荐

    通用弹出层

    "通用弹出层"在IT领域中通常指的是一个设计用于应用程序或网站的组件,它可以作为显示额外信息、提示用户操作或者展示复杂内容的一种交互模式。通用弹出层的设计旨在提供一种非侵入性的用户体验,同时保持界面的清晰...

    div+css实现弹出窗口背景变暗效果

    在实现弹出窗口中,通常会有一个主要的`div`作为弹出窗口的主体,另一个`div`作为背景变暗层。 在线op.css文件中,将包含定义这些`div`样式的CSS代码。比如,我们可以设置弹出窗口的`div`为绝对定位,使其能够悬浮...

    layer演示5种通用的手机弹出层

    "layer演示5种通用的手机弹出层"这个主题,显然关注的是如何利用layer库来实现各种类型的手机弹出层。Layer是一款广泛应用于前端开发的JavaScript库,尤其在网页端,它提供了丰富的弹出层解决方案,能够帮助开发者...

    好看的弹出层 遮蔽层

    为了实现遮蔽层,我们通常会创建一个全屏的 `div`,并设置较低的不透明度(如 `opacity: 0.5`)和背景色(如 `background-color: rgba(0, 0, 0, 0.5)`),以达到半透明效果,从而让背景页面模糊可见。 在压缩包中的...

    自己做的一个div弹出层js

    例如,可以定义一个通用的弹出层样式类`.popup`,包含基本的布局和动画效果,然后为每个具体的弹出层添加额外的类,如`.popup1`、`.popup2`,用于定制它们的外观和行为。 JavaScript在这个过程中起着关键作用,负责...

    asp.net 弹出框组件

    4. **ASP.NET AJAX Control Toolkit的PopupControlExtender**:对于服务器端控件的爱好者,ASP.NET AJAX Control Toolkit提供了一个PopupControlExtender,它可以将任何ASP.NET控件作为弹出框显示。这个组件利用AJAX...

    弹出asp.net ajax环境中的通用对话框的类AjaxDialog

    普通的asp.net 2.0应用程序中,如果需要弹出一个对话框,可以使用 Response.Write("&lt;script&gt;alert('弹出一个对话框');...在ajax页面中,不能使用上述方法,但是在AJAX中的ScriptManager却提供了弹出对话框的功能

    泽元div 弹出层,弹出框

    在网页设计和开发中,"泽元div 弹出层,弹出框"是一个常见的功能需求,用于显示一些额外的信息或者交互元素,如警告、确认对话框、表单填写等。这种技术通常涉及到HTML、CSS以及JavaScript的使用,尤其是jQuery或者...

    页面中弹出对话框div

    在网页设计中,"页面中弹出对话框div"是一个常见的需求,用于向用户展示临时信息、确认操作或收集输入。对话框通常不离开主页面,而是覆盖在内容上,提供一种交互方式。本篇文章将深入探讨如何使用HTML的div元素来...

    DIV弹出窗(兼容主流浏览器)

    在网页设计中,"DIV弹出窗(兼容主流浏览器)"是一种常见的用户界面元素,用于在用户与页面交互时提供额外的信息或者功能。这个技术基于HTML的`&lt;div&gt;`元素,通过CSS样式和JavaScript实现动态效果,以确保在各种主流...

    通用弹出可移动的DIV块

    在网页设计和开发中,"通用弹出可移动的DIV块"是一种常见的交互元素,它允许用户通过JavaScript或jQuery等库动态创建、显示和移动一个包含内容的div元素。这种功能广泛应用于模态对话框、提示窗口或者自定义菜单等...

    注册协议弹出层注册协议弹出层

    同时,设计上应有明显的关闭按钮,让用户可以随时关闭弹出层。 4. 动态加载:为了减少页面加载时间,协议内容可以在用户触发注册时动态加载,而不是预先加载在页面中。这需要用到前端开发技术,如JavaScript,实现...

    完整版弹出网页广告.rar

    "完整版弹出网页广告.rar"很可能包含了一系列关于如何创建、设计和实施弹出式广告的技术细节和实例。 弹出式广告是网页广告的一种形式,它在用户浏览网页时以独立窗口的形式突然出现,可以覆盖整个屏幕或者只占据一...

    div弹出层打包,包括弹出图片浏览

    本资源“div弹出层打包,包括弹出图片浏览”提供了一个用于创建弹出图片浏览的解决方案,其特点在于提供了多种样式选择,以满足不同设计需求,同时具有精美的视觉效果和易于使用的特性,类似于QQ相册的浏览体验。...

    漂亮的div弹出窗口样式

    本资源“漂亮的div弹出窗口样式”提供了一种美观的弹出窗口设计,适用于网页中的各种提示、警告或者信息展示。通过解压文件并双击html页面,我们可以直接预览这个弹出窗口的效果。 首先,我们来详细了解一下div弹出...

    使用JAVASCRIPT实现弹出框,过一段时间自动消失.txt

    通过调用`window.createPopup()`方法,可以生成一个弹出窗口,但需注意的是,`createPopup`并非标准的JavaScript方法,这通常意味着这段代码可能是在特定的浏览器环境(如IE)下编写的,或者是在某种框架或库的上...

    层,弹出层,div,层布局

    在网页设计和开发中,"层"(Layer)和"弹出层"(Popup Layer)是常见的布局技术,尤其在创建交互式用户界面时尤为重要。层是一种定位元素的方法,允许开发者将HTML元素(如图片、文本或表单)在页面上进行精确控制,...

    原生jQuery实现弹出层页面分享插件特效源码.zip

    标题 "原生jQuery实现弹出层页面分享插件特效源码.zip" 提供的信息表明,这个压缩包包含了一个使用原生jQuery编写的弹出层页面分享插件的源代码。弹出层通常指的是在用户交互时(如点击按钮)会在当前页面上弹出一个...

    Ajax实现弹出层...

    在实际开发中,为了提高代码复用性和可维护性,我们通常会封装这些功能成一个通用的Ajax弹出层组件,允许传入不同的参数,如请求URL、数据、回调函数等。 文件“Messaging”可能与这个话题有关,因为弹出层在消息...

    jQuery插件集之(弹出div4)+Demo

    本资源“jQuery插件集之(弹出div4)+Demo”提供了一个实用的解决方案,即用div而非模态窗口实现弹出功能。这个插件设计巧妙,能够为用户提供一种灵活的方式来展示信息,而无需依赖于传统的模态框。 首先,让我们深入...

Global site tag (gtag.js) - Google Analytics