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

Displaying Modal pop up on top frame

本文关键字：窗口 模态 显示 顶部 框架      更新时间：2023-09-26

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

感谢您的帮助。谢谢

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

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

您可以调用顶部框架中的函数，而不是使用窗口中的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); 
  }

当前帧代码调用：

  top.openModal(id);

花1天时间从iframe文档打开模态窗口首先我做了一个案例：

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

关键词changinmatter是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>
相关文章：