1

Meu cenario é o seguinte, tenho 3 frames topo(100px) conteudo( * ) e rodape (20px)

Gostaria de abrir uma janela modal (o link se encontra o frame do topo)onde a mascara ficasse acima dos 3 frames( na area total do navegador)

Obs: o meu sistema de modal funciona perfeitamente dentro do frame.

4
  • Com frameset não tem jeito, você está disposto a repensar essa parte?
    – bfavaretto
    Commented 11/06/2014 às 2:02
  • no caso é necessario utilizar os frames, mais caso tiver alguma alternativa se quiser me passar eu agradeço Commented 11/06/2014 às 2:05
  • O problema é que não tem alternativa. Ou pelo menos eu não conheço nenhuma.
    – bfavaretto
    Commented 11/06/2014 às 2:06
  • @ArsomNolasco pode colocar o código HTML e JS respectivo? Assim a pergunta fica mais concreta e a resposta também.
    – Sergio
    Commented 11/06/2014 às 6:30

2 Respostas 2

2

Se você estiver usando iframe, não cobrirá toda a área se o script que chama seu Modal estiver dentro de um dos frames. Porém, se for possível colocar a função no HTML pai dos frames, você pode chama-la do lado de dentro dos frames.

Dentro do iframe:

parent.suaFuncaoDoModal();
2

Pensei algo parecido à resposta do JuninZe: ter uma função dentro dos frames (frame_modal()) que vão simular o Modal Overlay. O dialog() abre no frame1 e dispara a função frame_modal do frame2 e frame3.

INDEX.HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>  
</head>
<frameset rows="175px,*" frameborder="0">
    <frame name="frame1" src="frame1.html">
    <frameset cols="50%,50%" class="child_frameset">
        <frame name="frame2" src="frame2.html">
        <frame name="frame3" src="frame3.html">
    </frameset>
</frameset>
</html>

FRAME1.HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Basic modal</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
    <script>
    $(function() {
        function open_mod(){
            $('.ui-widget-overlay').addClass('custom-overlay');
            $( ".ui-widget-overlay" ).on('click',function(){
                $('#dialog-modal').dialog('close');
            });
            top.window.frames["frame2"].frame_modal('block');
            top.window.frames["frame3"].frame_modal('block');
        }
        function close_mod(){
            $('.ui-widget-overlay').removeClass('custom-overlay');
            top.window.frames["frame2"].frame_modal('none');
            top.window.frames["frame3"].frame_modal('none');
        }
        $('#abre-modal').on('click', function() {
            $( "#dialog-modal" ).dialog( {
                height: 140,
                modal: true,
                open: open_mod,
                close: close_mod    
            } );
        });
    });
    </script>
    <style>
    .ui-widget-overlay.custom-overlay
    {
        background-color: black;
        background-image: none;
        opacity: 0.5;
    }
    </style>
</head>
<body>
    <div id="dialog-modal" title="Basic modal dialog">
        <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
    </div>
    <a href="javascript:" id="abre-modal">Abrir modal</a></p>
</body>
</html>

FRAME2.HTML

<!DOCTYPE html>  
<html lang="en">  
<head>
    <style>
    #custom-overlay
    {
        background-color: black;
        background-image: none;
        opacity: 0.5;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        display:none;
        z-index:999;
    }
    </style>
</head>
<body>
    <div id="custom-overlay"></div>
    <h1>I'm frame 2</h1>
    <script type="text/javascript">
    function frame_modal(how){
        document.getElementById("custom-overlay").style.display=how
    }
    </script>   
</body>
</html>

FRAME3.HTML

  • idêntico ao FRAME2.HTML, só trocando o texto:

    <h1>I'm frame 3</h1>
    
1
  • Realmente o overlay nao fica sobre os outros frames, somente no frame que e chamado Commented 18/06/2014 às 17:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .