顯示頂部框架上彈出的模態

我有一個要求，顯示一個模式在鏈接點擊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>

任何幫助是讚賞ated。謝謝。

來源

2015-02-10 Shobhit Tyagi

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

當前幀代碼調用：

top.openModal(id);

來源

2015-02-10 11:33:16 nanndoj

感謝您的答覆。我不確定我是否跟得上。可能是因爲缺乏我的JavaScript知識。將代碼放在頂部框架中是有意義的，因此窗口引用是針對父級的。但是，我將如何訪問該方法，因爲我現在需要從子框架中調用它。 – 2015-02-11 10:59:41

當您從子框架調用「頂部」。它會將參考返回到最高幀窗口。這就是爲什麼你必須調用top.openModal（id）。當你從孩子那裏做的時候，它會調用放在父框架 – nanndoj 2015-02-11 11:03:50

中的函數，只需使用頂層（或父層），你可以從父框架調用任何函數。 – nanndoj 2015-02-11 11:05:05

顯示頂部框架上彈出的模態

回答

相關問題