在顶部框架上显示“模态”弹出窗口

香柏树柳

我需要在链接单击时在jsp中显示模式弹出窗口。问题在于，jsp已分为多个帧。该链接位于其中一个框架中，当然，弹出窗口需要位于屏幕顶部，以掩盖每个框架。但是它显示的弹出窗口仅掩盖当前帧，而不掩盖整个屏幕。这就是我所拥有的代码。我是从博客获得的，但需要一些修改的帮助：

CSS：

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:fixed;
  left:0;
  top:0;
  width:900px;
  height:600px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

$(document).ready(function() {  
    $('a[name=modal]').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
        $(id).fadeIn(2000); 
    });

    $('.window .close').click(function (e) {
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
    });     

    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         
});

HTML代码是：

<a href="#dialog" name="modal" target="_top" style="text-decoration: none;">CLICK</a>

    <div id="boxes">
        <div id="dialog" class="window">
        Modal Window 
        </div>

        <div id="mask"></div>
    </div>

任何帮助表示赞赏。谢谢。

南多伊

1-将模态块代码（HTML）移动到顶部框架；

2-包括所有必需的库以在顶部框架中打开模式（jQuery和其他任何库）。

您可以在顶层框架中调用该函数，而不是使用window中的top属性。它将在顶层框架（放置所有功能的地方）上返回窗口参考。您必须处理这样的事情：

顶级框架代码：

  function openModal(id) {
    var winH = $(window).height();
    var winW = $(window).width();
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
    $(id).fadeIn(2000); 
  }

当前框架代码调用：