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 CODE是：

<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 - 将模态块代码（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); 
  }

CURRENT FRAME CODE CALL：

  top.openModal(id);

Answer 2

花1天时间从iframe文档中打开模式窗口首先，我做过一种情况：

parent.$("#you_modal_window_selector").css("visibility", "visible");

！！！关键字changin的问题是PARENT。（以小写字母表示）

第二，我使用脚本更改文档中的所有按钮：

<script> 
 $(function() {
        $(".open-modal").on("click", function (e) {
            var $this = $(this),
            $href = $this.attr("href");
            e.preventDefault();
            parent.$($href).css("visibility", "visible");
            parent.$(".modal-window-dark").css("visibility", "visible");
        });
    });
</script>

在顶部框架上弹出显示模态

2 个答案: