Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

Pensei algo parecido à resposta do JuninZeJuninZe: 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.

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.

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.

Fonte Link
brasofilo
  • 6,7mil
  • 5
  • 30
  • 50

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>