Efecto CSS fuera del iframe

Zafire · #1 (**permalink**) 06/05/2011, 12:16

Buenas, en mi pagina web estoy creando un MODAL window con jquery, el problema es que tengo una pagina principal dentro de ella esta un Iframe con una informacion y dentro de ese iframe esta el link que abre la modal window, el problema es que si clickeo la modal window sale dentro del iframe y yo quiero que salga en la pagina principal no se si me entiendes, como podria arreglar esto? es algo con z-index?

Panino5001 · #2 (**permalink**) 06/05/2011, 12:33

Nada que ver con z-index. Lo que debés hacer es colocar el script de la pseudomodal en la página principal y luego invocar la función que realiza la apertura de la pseudomodal agregándole "top": ejemplo , top.show(); (en lugar de show(), el nombre de la función de aperura de tu script: tendrás que analizar tu script si esta función no está tan a mano como quisieras).

Zafire · #3 (**permalink**) 06/05/2011, 13:25

Cita:

Iniciado por Panino5001

Nada que ver con z-index. Lo que debés hacer es colocar el script de la pseudomodal en la página principal y luego invocar la función que realiza la apertura de la pseudomodal agregándole "top": ejemplo , top.show(); (en lugar de show(), el nombre de la función de aperura de tu script: tendrás que analizar tu script si esta función no está tan a mano como quisieras).

Gracias pero mira aqui dejo mi codigo, no creo que sirva porq no es una funcion es algo diferente en el link no se

Código HTML:

<?php
include("config.php");
$mysql_connection = mysql_connect($mysql_host, $mysql_user, $mysql_pass);
$mysql_dbselect = mysql_select_db($mysql_db, $mysql_connection);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Eventos</title>
<link rel="stylesheet" href="js/jquery.superbox.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.titulo {
background-color:#0B0B0B;
color:#CCCCCC;
text-align:center;
font-size:12px;
}

.imagen {
background-color:#101010;
text-align:center;
}

.descrip {
	color: #2E2E2E;
	background-color:#0B0B0B;
}

.fecha {
	background-color:#0B0B0B;
	color:#2E2E2E;
	text-align:center;
	font-size:12px;
}
a:link {
	color: #0099FF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0099CC;
}
a:hover {
	text-decoration: underline;
	color: #00CCCC;
}
a:active {
	text-decoration: none;
	color: #0099CC;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
/* padding: 0; margin: 0;
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
  font: 12px Arial, Helvetica, sans-serif;
  color: #333333;
}
#TB_secondLine {
  font: 10px Arial, Helvetica, sans-serif;
  color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
  position: fixed;
  z-index:100;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
  background-color:#000;
  filter:alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
  position: fixed;
  background: #ffffff;
  z-index: 102;
  color:#000000;
  display:none;
  border: 4px solid #525252;
  text-align:left;
  top:50%;
  left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
  display:block;
  margin: 15px 0 0 15px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
}
#TB_caption{
  height:25px;
  padding:7px 30px 10px 25px;
  float:left;
}
#TB_closeWindow{
  height:25px;
  padding:11px 25px 10px 0;
  float:right;
}
#TB_closeAjaxWindow{
  padding:7px 10px 5px 0;
  margin-bottom:1px;
  text-align:right;
  float:right;
}
#TB_ajaxWindowTitle{
  float:left;
  padding:7px 0 5px 10px;
  margin-bottom:1px;
}
#TB_title{
  background-color:#e8e8e8;
  height:27px;
}
#TB_ajaxContent{
  clear:both;
  padding:2px 15px 15px 15px;
  overflow:auto;
  text-align:left;
  line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
  padding:15px;
}
#TB_ajaxContent p{
  padding:5px 0px 5px 0px;
}
#TB_load{
  position: fixed;
  display:none;
  height:13px;
  width:208px;
  z-index:103;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
  z-index:99;
  position:fixed;
  top: 0;
  left: 0;
  background-color:#fff;
  border:none;
  filter:alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  height:100%;
  width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
  clear:both;
  border:none;
  margin-bottom:-1px;
  margin-top:1px;
  _margin-bottom:1px;
}
-->
</style></head>

<body>
<table width="300" border="0" cellspacing="0" cellpadding="4">
<?php
$query = "SELECT * FROM eventos ORDER BY fecha DESC";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result))
{
?>
  <tr>
    <td class="titulo" height="30">
	<?php
		$nombre = $row['nombre'];
		$nombre = strip_tags($nombre);
		$nombre = htmlspecialchars($nombre);
		$nombre = trim($nombre);
		$nombre = substr($nombre, 0, 50);
		echo $nombre;
	?></td>
  </tr>
  <tr>
    <td class="imagen"><img src="<?php echo $row['imagen']; ?>" /></td>
  </tr>
  <tr>
    <td class="descrip">
	<?php
		$descripcion = $row['descripcion'];
		$descripcion = strip_tags($descripcion);
		$descripcion = htmlspecialchars($descripcion);
		$descripcion = trim($descripcion);
		$descripcion = substr($descripcion, 0, 200);
		echo $descripcion ?>... <a href="evento.php?&eventid=<?php $row['id'] ?>&placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" class="thickbox">Ver Mas</a>
  </td>
  </tr>
  <tr>
    <td class="fecha">
	<?php
			$fecha = explode("-", $row['fecha']);
			switch ($fecha[1]) {
			case 1:
				$mes = "Enero";
				break;
			case 2:
				$mes = "Febrero";
				break;
			case 3:
				$mes = "Marzo";
				break;
			case 4:
				$mes = "Abril";
				break;
			case 5:
				$mes = "Mayo";
				break;
			case 6:
				$mes = "Junio";
				break;
			case 7:
				$mes = "Julio";
				break;
			case 8:
				$mes = "Agosto";
				break;
			case 9:
				$mes = "Septiembre";
				break;
			case 10:
				$mes = "Octubre";
				break;
			case 11:
				$mes = "Noviembre";
				break;
			case 12:
				$mes = "Diciembre";
				break;
			}
			echo "<strong>".$fecha[2]." de ".$mes." del ".$fecha[0]."</strong>";
	 	?></td>
  </tr>
<?php
}
?>
</table>
</body>
</html>

Panino5001 · #4 (**permalink**) 06/05/2011, 13:33

Si mirás el código de esa librería encontrarás la función tb_show(caption, url, imageGroup), que es la que tenés que invocar como top.tb_show(caption, url, imageGroup). Lamentablemente, si usás librerías tenés 2 caminos:
1)las usás tal como fueron creadas y aceptás sus limitaciones.
2)te arremangás y las adaptás a tus necesidades.

Zafire · #5 (**permalink**) 07/05/2011, 06:50

Cita:

Iniciado por Panino5001

Si mirás el código de esa librería encontrarás la función tb_show(caption, url, imageGroup), que es la que tenés que invocar como top.tb_show(caption, url, imageGroup). Lamentablemente, si usás librerías tenés 2 caminos:
1)las usás tal como fueron creadas y aceptás sus limitaciones.
2)te arremangás y las adaptás a tus necesidades.

Gracias hermano, pero si modifico la libreria y a la funcion le pongo top.tb_show se daña, nisiquiera se ve el cuadro dentro del iframe solo sale el texto que va dentro normal...

Zafire · #6 (**permalink**) 08/05/2011, 11:13

quien puede ayudarme?