ventana emergente

Citar

Escrito el 07 Feb 2009 01:02 pm

Holas, hacer una ventana emergente es demasiado sencillo pero estoy viendo la forma de como hacen estas ventanas que bloquean el fondo de la pagina donde estaba naavegando para ver simplemente la ventana que deseo ver.... un ejemplo .. http://www.alexmoz.com/diseno-web.html y luego dale click a cualquier plan que muestra en la pagina... y observa lo que pasa... bloquea y pone como un fondo trasparente y muestra la ventana emergente muy particular a las comunes, porq puede dar escape y sale de la ventana....
como se haria eso?

Por adrigr79

3 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 07 Feb 2009 01:05 pm

primer paso que supe fue que te ubicas en el cursor uno de los planes y en la parte inferior muestra el link y aparece lo siguiente: diseno-planeconomico.html?keepThis=true&TB_iframe=true&height=515&width=630 (lo puedes ver en moxila) y tambien verifique el codigo fuente de esta seccion y me aparece lo siguiente:

<!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>
<title>Diseño Web · Alexmoz WebStudio Diseño de Páginas Web Colombia</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Subject" content="Diseño Web, Internet, Hosting, Registro de dominios Colombia" />
<meta name="Description" content="Diseño de sitios web optimizados, desarrollo de aplicaciones web, alojamiento, registro de dominios, diseño web, programación php/mysql, diseño de páginas web en colombia" />
<meta name="Keywords" content="Diseño web, programación web, desarrollo web, aplicaciones web, diseño paginas web, diseño web colombia, Diseño Web, portafolio web, diseño gráfico, optimización web" />
<meta name="robots" content="index, follow" />
<meta name="searchtitle" content="Diseño web, diseño paginas web, diseño web colombia" />
<meta name="author" content="Alexander Molano © Alexmoz WebStudio Colombia" />
<meta name="copyright" content="© Alexmoz WebStudio, Colombia" />
<meta name="language" content="es" />
<meta name="Distribution" content="Global" />
<meta name="Country" content="Colombia, España, Panamá, Estados Unidos" />
<link href="assets/diseno-web.css" rel="stylesheet" type="text/css" />

<link type="image/x-icon" href="favicon.ico" rel="icon" />
<link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" href="assets/thickbox.css" type="text/css" media="screen" />
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/thickbox.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<script type="text/javascript">
function stoperror(){

return true

}

window.onerror=stoperror
</script>


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-243086-1");
pageTracker._initData();
pageTracker._trackPageview();

</script>

<style type="text/css">

</style>
</head>

<body onload="goforit()">
<div align="center">

<div class="cuerpo">
<div style="border-left: 4px solid #000000; border-right: 4px solid #000000;">

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<style type="text/css">

</style>

<div class="arriba">
<h1>Diseño Web, Empresa de diseño web en Colombia e Hispanoamérica, con garantía de calidad y servicios profesionales de diseño, hosting y dominios</h1>
</div>
<div class="cabeceraoficial">

<table width="100%" cellpadding="0" cellspacing="0">
<tr>

<td><a href="http://www.alexmoz.com"><img src="images/h_Logo.jpg" alt="Diseño Web | Diseño Páginas Web Colombia | Hosting, dominio, web studio" border="0" /></a></td>
<td><a href="http://www.alexmoz.com"><img src="images/h_Logo2.jpg" alt="" border="0" /></a></td>
<td><img src="images/h_Head.jpg" alt="Diseño Gráfico y Web Internacional" width="439" height="134" /></td>
<td><script type="text/javascript">
AC_FL_RunContent( 'type','application/x-shockwave-flash','data','assets/head.swf','width','148','height','134','movie','assets/head' ); //end AC code
</script>
<noscript>
<object type="application/x-shockwave-flash" data="assets/head.swf" width="148" height="134">
<param name="movie" value="assets/head.swf" />
</object>
</noscript></td>
</tr>
</table>

</div>

<div class="menuprincipal" style="width: 100%;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" style="border-right: 1px solid #000000;"><a href="index.html">Home</a></td>
<td width="15%" style="border-right: 1px solid #000000;"><a href="diseno-web.html" title="Diseño Web">Diseño Web</a></td>
<td width="13%" style="border-right: 1px solid #000000;"><a href="servicios.html">Servicios</a></td>

<td width="11%" style="border-right: 1px solid #000000;"><a href="portafolio.html">Clientes</a></td>
<td width="17%" style="border-right: 1px solid #000000;"><a href="contacto.html">Contáctenos</a></td>
<td width="13%" style="border-right: 1px solid #000000;"><a href="http://weblog.alexmoz.com/" target="_blank">Weblog</a></td>
<td width="22%"><a href="#">Discover <span class="Estilo1">&</span> Download</a></td>
</tr>
</table>

</div>

<div style="border-bottom: 1px solid #333333; margin-top: 2px; padding: 0px;"></div>
<div class="disenoweb">
<div id="directorio"><a href="index.html">Home</a><a href="servicios.html">Servicios</a>Diseño Web</div>
<table width="954" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/s_diseno_menu.jpg" width="954" height="95" border="0" usemap="#Map2" /></td>

</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div class="serviciocontenido">
<p>Sabemos lo importante que es hoy en día para cualquier empresa, negocio o persona, contar con presencia en Internet, por lo tanto, brindamos las más avanzadas soluciones hechas a tu medida y teniendo siempre en cuenta tus necesidades. </p>
<p>Te ofrecemos una completa consultoría en el diseño de tu página web, asesoría en desarrollo y <b>Diseño Web Profesional</b>. Nuestros trabajos son hechos a tu medida, respetando cada detalle y haciendo uso de la más avanzada tecnología de Adobe®, garantizando la mejor calidad en imagen gráfica, usabilidad y agilidad. Puedes optar por un diseño interactivo en html o por la mejor tecnología en Flash para un diseño mucho más dinámico y llamativo.</p>

</div>

</td>
<td style="width: 135px; vertical-align:top; margin: 0px; padding: 0px;"><img src="images/s_diseno_curl.jpg" width="185" height="135" /></td>
</tr>
</table>
<div class="serviciocontenido">
<h1>Nuestros Planes de Diseño Web<br />
</h1>

<table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>

<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><a href="diseno-planeconomico.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLAN ECONOMICO DE DISEÑO WEB" class="thickbox"><img src="images/box_diseconomico.jpg" alt="Plan Económico" width="175" height="213" border="0" /></a></td>
<td><a href="diseno-planbasico.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLAN BASICO DE DISEÑO WEB" class="thickbox"><img src="images/box_disebasico.jpg" alt="Plan Básico" width="175" height="213" border="0" /></a></td>

<td><a href="diseno-planprofesional.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLAN PROFESIONAL DE DISEÑO WEB" class="thickbox"><img src="images/box_diseprofesional.jpg" alt="Plan Profesional" width="175" height="213" border="0" /></a></td>
<td><a href="diseno-plancorporativo.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLAN CORPORATIVO DE DISEÑO WEB" class="thickbox"><img src="images/box_disecorporativo.jpg" alt="Plan Corporativo" width="175" height="213" border="0" /></a></td>
<td><a href="diseno-planpremium.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLAN PREMIUM DE DISEÑO WEB" class="thickbox"><img src="images/box_disepremium.jpg" alt="Plan Premium" width="175" height="213" border="0" /></a></td>
</tr>
<tr>
<td><div align="right"><span class="Estilo1"><a href="diseno-planeconomico.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLAN ECONOMICO DE DISEÑO WEB" class="thickbox">[+] Ver Características</a><br />
<a href="cotizar.html">Solicitar Cotización</a></span></div></td>
<td><div align="right"><span class="Estilo1"><a href="diseno-planbasico.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLAN BASICO DE DISEÑO WEB" class="thickbox">[+] Ver Características</a><br />

<a href="cotizar.html">Solicitar Cotización</a></span></div></td>
<td><div align="right"><span class="Estilo1"><a href="diseno-planprofesional.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLAN PROFESIONAL DE DISEÑO WEB" class="thickbox">[+] Ver Características</a><br />
<a href="cotizar.html">Solicitar Cotización</a></span></div></td>
<td><div align="right"><span class="Estilo1"><a href="diseno-plancorporativo.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLAN CORPORATIVO DE DISEÑO WEB" class="thickbox">[+] Ver Características</a><br />
<a href="cotizar.html">Solicitar Cotización</a></span></div></td>
<td><div align="right"><span class="Estilo1"><a href="diseno-planpremium.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLAN PREMIUM DE DISEÑO WEB" class="thickbox">[+] Ver Características</a><br />

<a href="cotizar.html">Solicitar Cotización</a></span></div></td>
</tr>
</table>
</div>

<div class="serviciocontenido" style="background-image:url(images/s_diseno_fondoextra.jpg); background-repeat:repeat-y;">

<h1>Planes Especiales</h1>
<table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>

<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35%"><a href="diseno-planesplus.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLANES PLUS TOTAL DE DISEÑO WEB" class="thickbox"><img src="images/box_diseplus.jpg" alt="Planes de Diseño Plus" width="151" height="202" border="0" /></a></td>
<td width="62%" style="vertical-align:top"><h2><br />
<b>PLANES PLUS TOTAL</b></h2>
<p> Pensando en ofrecerte servicios cada vez más completos, te traemos los nuevos planes <span class="Estilo2">PLUS TOTAL </span>de <b>Diseño Web</b>, en donde obtienes, además del diseño, <b>Hosting</b> desde 500MB y <b>Dominio Gratis</b> por 1 año.</p>

<p>Cada uno de nuestros planes tiene su versión plus, o tu mismo puedes armar el plan de acuerdo a tus necesidades y requerimientos. <a href="diseno-planesplus.html?keepThis=true&TB_iframe=true&height=515&width=630" title="PLANES PLUS TOTAL DE DISEÑO WEB" class="thickbox">[+] Leer más</a> ---> <a href="cotizar.html">Solicitar Cotización</a><br />
</p>
<p> </p></td>
<td width="3%" style="vertical-align:top"> </td>
</tr>
</table></td>

<td style="width: 450px;">
<div>
<script type="text/javascript">
AC_FL_RunContent( 'type','application/x-shockwave-flash','data','assets/AD450x200E.swf','width','450','height','200','movie','assets/AD450x200E' ); //end AC code
</script>
<noscript>
<object type="application/x-shockwave-flash" data="assets/AD450x200E.swf" width="450" height="200">
<param name="movie" value="assets/AD450x200E.swf" />
</object>
</noscript>
</div>
</td>
</tr>
</table>

</div>

<p> </p></td>
</tr>
</table>

<div style="padding: 0px; margin: 0px;"></div>

</div>

<div class="barrafooterbuscar">
<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="59%" style="text-align:left;">  »<a href="soporte.html"> Solicitar Soporte</a> »<a href="promociones.html"> Ver Promociones</a> » <a href="enlaces.html">Sitios Web Recomendados</a></td>
<td width="41%">



<form action="buscar.html" name="cse-search-box" id="cse-search-box" >
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="33%" style="text-align:right;"><input type="hidden" name="cx" value="013963197289927295218:v63sukoexcy" />
<input type="hidden" name="cof" value="FORID:11" />
<label>Buscar:  </label></td>
<td width="57%"><input type="text" name="q" size="35" /></td>
<td width="10%"><div align="center">
<input name="imageField" type="image" id="imageField" src="images/footer_botonbuscar.png" alt="Buscar" />

</div></td>
</tr>
</table>
</form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

</td>
</tr>
</table>

</div>
<div class="barrafooterlogos" style="border-bottom: 4px solid #d4d4d4;">
<b><a href="index.html">Home</a> | <a href="contacto.html">Contáctenos</a> | <a href="about.html">Sobre Alexmoz™</a> | <a href="servicios.html">Servicios</a> | <a href="legal.html?keepThis=true&TB_iframe=true&height=300&width=500" title="Notas legales sobre Alexmoz.com" target="_blank" class="thickbox">Legal</a> | <a href="formas-de-pago.html">Formas de Pago</a> | <a href="sitemap.html">Mapa del Sitio</a> | <a href="http://weblog.alexmoz.com/" target="_blank">Weblog</a> | <a href="diseno-web.html">Diseño Web</a> | <a href="plantillas-web.html">Plantillas Web</a> | <a href="portafolio.html">Portafolio</a></b>
<br />

<br />

<img src="images/footer_logos.jpg" alt="Web Design and Development" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="4,4,100,39" href="http://www.safecreative.org/profile/0805010027234" target="_blank" alt="Todos los derechos reservados (Safe Creative #0805010027234)" />
<area shape="rect" coords="101,4,155,39" href="http://searchitup.com/support/aff.php?aff=011" target="_blank" alt="SearchItUp (Partner en Hosting Web)" />
<area shape="rect" coords="265,3,349,39" href="https://www.moneybookers.com/app/?rid=2298575" target="_blank" alt="Nuestro método de pago más efectivo MoneyBookers.com" />
<area shape="rect" coords="460,7,552,36" href="http://creativecommons.org/licenses/by-nc-nd/2.5/co/" target="_blank" alt="Creative Commons License" /><area shape="rect" coords="554,6,597,37" href="http://store.templatemonster.com/?aff=alexmoz" target="_blank" alt="MonsterTemplates - El mejor sitio de plantillas de la red" />
<area shape="rect" coords="353,4,453,39" href="http://www.alexmoz.com" alt="Diseño y desarrollo web por Alexmoz WebStudio" />
<area shape="rect" coords="159,5,263,39" href="http://www.mercadopago.com" target="_blank" alt="Aceptamos MercadoPago" />

</map

></div>

<div class="barrafootercopyright">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="91%"><strong>Copyright © 2006-2008 - Alexmoz™ WebStudio</strong> TODOS LOS DERECHOS RESERVADOS<br />
<div style="font-size:7pt; font-family:Verdana, Arial, Helvetica, sans-serif;"> Se prohibe la reproducción total o parcial de todo el contenido de este sitio web
<br />
Diseño Web | Hosting | Dominios | Colombia | Iberoamérica | Web Design and Development</div></td>

</tr>
</table>
</div>
<div align="center">
<div style="text-align:center;"></div>
</div>

</div>
</div>

</div>

<map name="Map2" id="Map2">
<area shape="rect" coords="631,4,660,74" href="plantillas-web.html" alt="Plantillas Web" />
<area shape="rect" coords="602,4,631,74" href="e-commerce.html" alt="Comercio Electrónico" />
<area shape="rect" coords="573,4,602,74" href="aplicaciones-web.html" alt="Desarrollo de Aplicaciones Web" /><area shape="rect" coords="545,4,574,74" href="administracion-web.html" alt="Administración de Sitios Web" />
<area shape="rect" coords="62,15,242,46" href="diseno-web.html" alt="Home | Diseño Web" />
</map>
</body>
</html>

Por adrigr79

3 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 07 Feb 2009 01:06 pm

pero no hallo el codigo que hace esa funcionalidad especial?

Por adrigr79

3 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 09 Feb 2009 04:34 am

prueba con una busqueda en google, modalbox

Por fack.us

25 de clabLevel

Envíale un mensaje privado Web

la choya bay

Citar

Escrito el 01 Jun 2009 02:48 pm

Lo que utilizan es jquery thickbox.

Googlea jquery y jquery thickbox, te descargas ambas librerias y luego las llamas desde tu header.

Por ultimo, en tu body, haces referencia al enlace con el atributo class="thickbox" y ya...

<a href="plan-1.php" class="thickbox">Ver plan 1</a>

Demasiado tarde?

Por Necrophasto

Claber

148 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Diseñador gráfico y web

@viktormorales

Citar

Escrito el 15 Ago 2012 11:28 pm

Se puede usar alguno de los plugins jquery como por ejemplo lightbox, thickbox o modalbox, no estoy seguro si prettyphoto tambien sirva para esta función, espero sirva la info, saludos

Por dweb3dcom

5 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

diseñador páginas web

@dweb3d

ventana emergente

Escribe una respuesta rapida