javascript - 在顶部框架上显示模态弹出窗口

Question

我需要在单击链接时在 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;
}

JS

$(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>

感谢任何帮助。谢谢。

Answer 1

1 - 将模态 block 代码 (HTML) 移至顶部框架；

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

您可以使用 top property 调用顶层框架中的函数从窗口。它将在顶层框架(放置所有函数的地方)上返回窗口引用。你必须处理这样的事情:

顶部框架代码:

  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); 
  }

当前帧代码调用:

  top.openModal(id);