Modal Window overlap Frames

Navigation
1

My scenario is as follows, I have 3 frames top (100px) content (*) and rodape (20px)

I would like to open a modal window (the link is the top frame) where the mascara is above 3 frames (in the total browser area)

Note: my modal system works seamlessly inside the frame.

    
asked by anonymous 11.06.2014 / 03:46

2 answers

2

If you are using iframe , it will not cover the entire area if the script that calls your Modal is within one of the frames. However, if it is possible to place the function in the parent HTML of the frames, you can call it inside the frames.

Within the iframe: 

parent.suaFuncaoDoModal();
    
11.06.2014 / 14:20
2

I thought something like the response from JuninZe : have a function inside the frames ( frame_modal() ) that go simulate the Modal Overlay. The dialog() opens in frame1 and triggers the frame_modal function of frame2 and 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

  • identical to FRAME2.HTML, just changing the text: 

    <h1>I'm frame 3</h1>
11.06.2014 / 14:49
How to get the value of a particular listview item java android Error trying to insert with PHP