如何将子页置在父页的前端？

Question

我想点击父页弹出一个子页窗口，但我想把这个子页置在父页的前端,也就是说只能操作当前页，只有关闭了子页才能操作父页。如何实现呢？麻烦各位告知,谢谢

Answer 1

jquery 有这样的插件搜索一下，很多的

Answer 2

window.showmodaldialog
jquery dialog等

Answer 3

有各种写法，下面是一种：
<a href="#" onclick="window.showModalDialog('b.aspx')">打开B页面</a>

Answer 4

jquery写个弹出层，弄个透明度0的遮罩层遮住页面

Answer 5

function showPopup(url, width, height, title)   //默认本页弹出
{
    if (width == 0)
        width = 600;//screen.availWidth/2;
    if (height == 0)
        height = 450;//screen.availHeight/2;
    
    var top = (document.documentElement.clientHeight-height)/2+document.documentElement.scrollTop;
    var left = (document.body.offsetWidth-width)/2; 
    
    if (top <= 0)
        top = 10;//(document.documentElement.scrollHeight-height)/2;
    if (left <= 0)
        left = 0;
    var doc = document;
    ShowPopTable(doc, url, top, left, width, height-20, title, true);
}function framePopup(doc, url, width, height, title) //框架，在另一个框架中弹出
{
    if (width == 0)
        width = screen.availWidth/2;
    if (height == 0)
        height = screen.availHeight/2;
    
    var top = (doc.body.clientWidth-height)/2;
    var left = (doc.body.offsetWidth-width)/2;
    if (top <= 0)
        top = 10;
    if (left <= 0)
        left = 0;    ShowPopTable(doc, url, top, left, width, height-20, title, true);
}
function testsPopup(url, width, height, title) //弹出试题测试
{
    if (width == 0)
        width = screen.availWidth/2;
    if (height == 0)
        height = screen.availHeight/2;
    var doc = document;
    ShowPopTable(doc, url, 0, 0, width, height-20, title, false);
}
function showLeftFrame() //显示左框架
{
    window.top.document.getElementById('topFrame').cols = '217,*';
    window.top.frames[1].document.scrolling = 'yes';
}
function closeTestPopup(doc)
{
    if (confirm('确定要退出测试吗？'))
    {
        removePopTable(doc);
        showLeftFrame();
    }
}
function closePopup(doc)
{
    removePopTable(doc);
    showLeftFrame();
}
function ShowPopTable(doc, url,top,left,width,height, title, drag) //drag是否可以拖动
{
    removePopTable(doc);
    var div=doc.createElement("div");
    if (div == null)
        alert('null');
    div.id = 'tbDiv';
    div.style.backgroundColor = '#aaaaaa'; //颜色
    div.style.width = document.body.offsetWidth+"px";//document.documentElement.clientWidth;//(doc.body.offsetWidth+20)+"px";
    div.style.height = screen.height+"px";//(Math.max(document.body.clientHeight, document.documentElement.clientHeight)-100)+"px";//screen.availHeight;//
    div.style.top = "0px";
    div.style.left = "0px";
    //div.style.right = '0px';
    //div.style.bottom = '0px';
    div.style.position = 'absolute';//
    div.style.zindex = 101;
    div.style.filter='Alpha(Opacity=45)';//
    div.style.MozOpacity=0.45;
    var iWidth = document.body.offsetWidth;//document.documentElement.clientWidth; 
    var iHeight = document.documentElement.scrollHeight;//document.documentElement.clientHeight+
    div.innerHTML = '<div style="width: 100%; height: '+iHeight+'px;"></div>';//(screen.availHeight-window.screenTop-20)
    var tb=doc.createElement("table");
    if (tb == null)
        alert('null');
    tb.id = 'tbPop';    tb.style.backgroundColor = '#E3EAEB'; //颜色
    tb.style.width = width;
    tb.style.heigth = height;
    tb.style.top = top + "px";
    tb.style.left = left + "px";
    tb.style.position = 'absolute';//
    tb.style.zindex = 100;
    tb.insertRow(0);
    var tdTitle = tb.rows[0].insertCell(0); //标题
    tdTitle.align = 'center';
    tdTitle.valign = 'bottom';
    
    tdTitle.style.width = width - 20;
    var str = '<div style="cursor:move; width:'+tdTitle.style.width+'px;vertical-align: bottom;" onmousedown="MyMove.Move(\'tbPop\',event,1)">'+title+'</div>';
    if (drag == false)
        str = '';
        //str = '<div style="width:'+tdTitle.style.width+'px; vertical-align:bottom;">'+title+'</div>';
    tdTitle.innerHTML = str;
    
    var tdColse = tb.rows[0].insertCell(1); //关闭
    tdColse.align = 'right';
    tdColse.style.width = 10;
    var colseStr = '<span style="cursor: pointer; width: 10px; margin-left:5px" title="关闭" onclick="removePopTable(document)">×&nbsp;</span>';
    if (drag == false)
        colseStr = '';
        //colseStr = '<span style="cursor: pointer; width: 10px; margin-left:5px" title="关闭" onclick="closeTestPopup(document)">×&nbsp;</span>';
    tdColse.innerHTML = colseStr;
    
    tb.insertRow(1);
    var tdIframe = tb.rows[1].insertCell(0); //内容
    tdIframe.colSpan = 2;
    tdIframe.innerHTML = '<iframe src="' + url + '" width="' + width + 'px" height="' + height + 'px" frameborder="0"></iframe>'; //scrolling="no" 
    
    doc.body.appendChild(div);
    doc.body.appendChild(tb);
}
function removePopTable(doc)
{
    var divPoppup = doc.getElementById('tbDiv');
    if (divPoppup) 
    {
        divPoppup.parentNode.removeChild(divPoppup);
    }
    var divPoppup = doc.getElementById('tbPop');
    if (divPoppup) 
    {
        divPoppup.parentNode.removeChild(divPoppup);
    }
}function Tong_MoveDiv()
{
    var dragapproved=false;
    //参数说明
    // id 要移动的层ID
    // Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
    // T 为 int 有数字是拖动 没有是变大小
    this.Move=function(Id,Evt,T)
    {
//        var Id = 'tbPop';
//        var T = 1;
        if(Id=="") return;
        var o = document.getElementById(Id);
        if(!o) return;//如果这个东东不在
        evt = Evt ? Evt : window.event;
        o.style.position = "absolute";//设定他的样式为绝对定位
        o.style.zIndex = 200;//这里显示上下的
        var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素使它在FF中也可以用
        //得到当前对要移动对象的 坐标
        var w = o.offsetWidth;
        var h = o.offsetHeight;
        var l = o.offsetLeft;
        var t = o.offsetTop;       dragapproved=true;
        if(T)//看看是拖动还是 变大小
        {
            this.Move_OnlyMove(Id,evt);
        }
        else
        {
        }
    }
   
    //移动函数
    //参数 Id 要移动的层ID
    //Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
    this.Move_OnlyMove = function(Id,Evt)
    {
        var o = document.getElementById(Id);
        if(!o) return;
        evt = Evt?Evt:window.event;//都是FF 才要这么写的
        var relLeft = evt.clientX - o.offsetLeft;//得到左边的 宽度
        var relTop = evt.clientY - o.offsetTop;//得到上边的 宽度
        //抓取 事件
        if (!window.captureEvents)
        {
            o.setCapture(); //指定 抓取 事件
        }
        else
        {
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
        }
       
        //文档的 onmousemove 事件
        document.onmousemove = function(e)
        {
            if (dragapproved)
            {
                if (!o) return;
                e = e ? e : window.event;
                if (e.clientX - relLeft <= 0)
                    o.style.left = 0 +"px";
                else if (e.clientX - relLeft >=document.documentElement.clientWidth - o.offsetWidth - 2)
                    o.style.left = (document.documentElement.clientWidth -o.offsetWidth - 2) +"px";
                else
                    o.style.left = e.clientX - relLeft +"px";
                if (e.clientY - relTop <= 1)
                    o.style.top = 1 +"px";
                else if (e.clientY - relTop >=document.documentElement.clientHeight - o.offsetHeight - 30)
                    o.style.top = (document.documentElement.clientHeight -o.offsetHeight - 30) +"px";
                else
                    o.style.top = e.clientY - relTop +"px";
            }
        }
       
        //文档的 onmouseup 事件
        document.onmouseup = function()
        {
            if (!o) return;
            if (!window.captureEvents)
                o.releaseCapture();
            else
                window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            dragapproved=false;
        }   
    }
   
    this.Move_e = function(Id, l0 , t0, l, t)
    {
        if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+Id]);
        var o = document.getElementById(Id);
        if (!o) return;
        var sl = st = 8;
        var s_l = Math.abs(l0 - l);
        var s_t = Math.abs(t0 - t);
        if (s_l - s_t > 0)
            if (s_t)
                sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) *6;
            else
                sl = 0;
        else
            if (s_l)
                st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) *6;
            else
                st = 0;
        if (l0 - l < 0) sl *= -1;
        if (t0 - t < 0) st *= -1;
        if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;
        if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;
        if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;
        if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;
        if (s_l == 0 && s_t == 0) return;
        if (Math.abs(l + sl - l0) < 2)
            o.style.left = l0 +"px";
        else
            o.style.left = l + sl +"px";
        if (Math.abs(t + st - t0) < 2)
            o.style.top = t0 +"px";
        else
            o.style.top = t + st +"px";
        window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0+" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +")", 1);
    }
}
var MyMove = new Tong_MoveDiv();

Answer 6

var w=window.open();
w.focus();

Answer 7

juqery有个插件，弹出的。可以看看，可以解决你的问题。

Answer 8

to ds252743641
你的代码挺好用，但是如果想在别的框架显示的话就出错“body.clientwidth 为空或不是对象”，我想在上框架点击然后在下框架显示，如何实现呢？以下是我的代码！整个框架代码
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title><FRAMESET id=mm border=false name=mm1 frameSpacing=0 rows=70,10,74%,0,3% frameBorder=0>
<FRAME name=top src="index.htm" noResize scrolling=no target="middle">
<FRAME name=to_TOP src="go_TOP.htm" scrolling=no noresize>
<FRAME name=middle src="main0.htm" target="bottom" scrolling="no" noresize>
<FRAME name=bottom src="" scrolling=no target="botton">
<FRAME name=botton marginHeight=6 src="footer.htm" scrolling=no noresize>
</FRAMESET>
</head><body></body></html>
上框架网页代码：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<SCRIPT language=javascript>
--这里加入你的那段代码
</script>
<base target="middle">
</head><body>
<input class="btn" name="B3" onclick="framePopup('middle','1.aspx',100,100,'aa');" type="button" value="弹出窗口" />
<input class="btn" name="B4" onclick="showLeftFrame();" type="button" value="点击返回" /
</body></html>麻烦大哥们帮看看，小弟万分感谢

Answer 9

不懂你的意思.
如果你是多框架结构, 譬如点击某个框架,则更新另外一个框架的url则直接
在top 框架的链接 onclick = "parent.window.frames['bottom'].src = 'url'"; 即可否则 直接 popup