Отображение модального всплывающего окна на верхнем фрейме

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 - Переместить код модального блока (HTML) в верхний кадр;

2 - Включите все необходимые библиотеки, чтобы открыть модальный в верхнем кадре (jQuery и любые другие).

Вы можете вызвать функцию в верхнем кадре, используя top property из окна. Он вернет ссылку на окно на верхнем фрейме (где будут размещены все функции). Вы должны иметь дело с чем-то вроде этого:

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

текущего кадра КОД CALL:

top.openModal(id);