poner un jquery dialog encima de frames

driowrio · #1 (**permalink**) 26/12/2013, 02:35

Hola a todos, tengo 2 frames y me gustaria que un dialog de jquery se posicione encima de los dos frames ya sea en el parent de los frames o en el top del sitio web, he estado todo el dia intentando pero sin resultados positivos, aca les dejo el codigo que estoy utilizando:

Código:

<frameset id="mainFrame"cols="50%,50%"> 
    <frame id="f1" src="test.php"></frame> 
    <frame id="f2" src="test2.php"/>
<frame/>

<div id="ajaxpopup"><center><p><h3>Ingrese su email</h3></p></center</div>

<script type="text/javascript">
function loadpopunder(){
	function Init(){
		jQuery('#ajaxpopup').dialog({ buttons: 
		{
			"Aceptar": function()
			{
					jQuery('#ajaxpopup').dialog('close');
			}
		}, closeOnEscape: true, modal: true, show: 'slide' });
	}
	jQuery(document).ready(Init);
}
loadpopunder();
</script>
</frameset>

Muchas Gracias.

satjaen · #2 (**permalink**) 01/01/2014, 13:34

Hola, te dejo este ejemplo a ver si te vale.

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<script src="jquery-ui-1.7.2/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
<link href="jquery-ui-1.7.2/css/base/ui.core.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.dialog.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.theme.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.images.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2142022: #dialog */
 
        #dialog .ui-widget {
            font-family: inherit;
        }
        
        .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
            color: #000000;
        }
        
        .ui-widget-header {
            font-size:1em;
            font-weight: bold;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            background: #cccccc;
            border-color: #666666;
            border-width: 1px;
        }
            
        .ui-dialog-title {
            line-height: 1em;
            color: #000000;
            font-weight: bold;
        }
        
        .ui-widget-content {
            font-size:1em;
            font-weight: bold;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            background: #eeeeee;
            border-color: #666666;
            border-width: 1px;
        }
        
        /* tab panel bounding box */ 
        .ui-dialog-content {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            color: #333333;
            font-size:.8em;
            padding: 10px;
        } 
        
        .ui-dialog-buttonpane {
            font-size:.8em;
        }
        
        
/* EndOAWidget_Instance_2142022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2142022" binding="#dialog" />
</oa:widgets>
-->
</script>
</head>
 
<body>
<script type="text/javascript">
// BeginOAWidget_Instance_2142022: #dialog
 
                $(document).ready(function() {
                    $("#dialog").dialog({   draggable: 'true',
                                            resizable: 'false',
                                            title: 'Dialog Title',
                                            buttons: { "OK": function() { $(this).dialog("close"); }} } );
                });
        
// EndOAWidget_Instance_2142022
</script>
<div id="dialog" title="Dialog Title">Dialog Message Text</div>
</body>
</html>

Un saludo