VENTANA POPUP solamente que sea imagen con X para cerrar

upap · #1 (**permalink**) 20/05/2008, 13:33

Hola...hace tiempo llevo buscando algún tutorial que explique como crear una especie de Popup pero que solamente se abra una ventanita en medio de una web con la publicidad solamente en imagen. Todos los popup por lo que veo generan una "pagina" con su marco, su barra de desplazamiento si así lo deseas etc.

En este caso es la típica ventana publicitaria que se abre en terra, softonic, con las publicidades y una X para cerrar la imagen

Alguien controla de algo así???
Thanks

upap · #2 (**permalink**) 20/05/2008, 13:37

según parece es con DIV y CSS...no es con windows.open

ACTIVO · #3 (**permalink**) 24/05/2008, 10:38

Cita:

Iniciado por upap

Hola...hace tiempo llevo buscando algún tutorial que explique como crear una especie de Popup pero que solamente se abra una ventanita en medio de una web con la publicidad solamente en imagen. Todos los popup por lo que veo generan una "pagina" con su marco, su barra de desplazamiento si así lo deseas etc.

En este caso es la típica ventana publicitaria que se abre en terra, softonic, con las publicidades y una X para cerrar la imagen

Alguien controla de algo así???
Thanks

--------------------------------------------------------------------------------------------------------
Hola!
Crea el Pop up y coloca el siguiente código donde quieres que aparesca la orden de cerrar:
</font><a href="javascript:close()"><font size="2">[Cerrar Ventana]</font></a></font>

upap · #4 (**permalink**) 24/05/2008, 14:33

hola ACTIVO...gracias por responder....
si te fijas en los enlaces que puse...realmente no son POPUPS se trata de capas creadas con DIV pero es q no encuentro ningun tutorial x ningun lao

stevendx · #5 (**permalink**) 24/05/2008, 15:42

buenas, casualmente estba buscando algo parecido y me preguntaba si sabian algo sobre como desaparecer los bordes del pop up (bordes predeterminados del windows donde va el nombre de la pagina) es que quiero hacer una web pero que no me salga esa ventana, me imagino que sera con codigo pero he estado buscando y no encuentro nada, si alguien sabe algo por favor, me serviria mucho, gracias

MRB08 · #6 (**permalink**) 25/05/2008, 09:16

Yo hice eso una vez y estubo de pelos, le extraí el script a los foros de vagos.es
Index.htm:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="twoColLiqLt.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.Estilo1 {
	font-family: Arial;
	font-size: 12px;
}
-->
</style>
<script src="scriptcero.js" type="text/javascript"></script>
</head><body class="twoColLiqLt" onload="staticbar('registerbar','fromRight','frombottom','0','15','15'); return false">
<div style="visibility: visible; right: 4px; top: 513px;" id="registerbar">
<div id="titulo">
<div align="right"><a href="#" onclick="closebar('registerbar','0'); return false"><span class="Estilo1">Cerrar</span><img src="Comunidad%20vagos.es%20-%20Vagos_files/botonCerrar.png" border="0" height="14" width="16"></a> </div>
</div>
<span class="Estilo1"><font color="#000000">Anuncio</font></span></div>
</body></html>

Scriptcero.js:

Código:

/******************* FUNCIONES PARA LAYER FLOTANTE ******************************/

// persistclose=0  set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
//var startX = 30  set x offset of bar in pixels
//var startY = 15  set y offset of bar in pixels

// verticalpos  enter "fromtop" or "frombottom"
// horizontalpos  entrar "fromRight o "fromLeft"
//staticbar(IdLayer,horizontalpos,verticalpos)
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(IdLayer,persistclose){
if (persistclose)
document.cookie="remainclosed=0"
document.getElementById(IdLayer).style.visibility="hidden"
}

function staticbar(IdLayer, horizontalpos, verticalpos, persistclose, startX, startY){
   try {
       barheight = document.getElementById(IdLayer).offsetHeight
       var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
       var d = document;
       function ml(id){
           var el = d.getElementById(id);
           if (!persistclose || persistclose && get_cookie("remainclosed") == "")
               el.style.visibility = "visible"
           if (d.layers)
               el.style = el;
           if (horizontalpos == "fromRight") {
               el.sP = function(x, y){
                   this.style.right = x + "px";
                   this.style.top = y + "px";
               };
           }
           else {
               el.sP = function(x, y){
                   this.style.left = x + "px";
                   this.style.top = y + "px";
               };
           }
           el.x = startX;
           if (verticalpos == "fromtop")
               el.y = startY;
           else {
               el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
               el.y -= startY;
           }
           return el;
       }
       window.stayTopLeft = function(){
           if (verticalpos == "fromtop") {
               var pY = ns ? pageYOffset : iecompattest().scrollTop;
               ftlObj.y += (pY + startY - ftlObj.y) / 8;
           }
           else {
               var pY = ns ? pageYOffset + innerHeight - barheight : iecompattest().scrollTop + iecompattest().clientHeight - barheight;
               ftlObj.y += (pY - startY - ftlObj.y) / 8;
           }
           ftlObj.sP(ftlObj.x, ftlObj.y);
           setTimeout("stayTopLeft()", 10);
       }
       ftlObj = ml(IdLayer);
       stayTopLeft();
   } catch (e) {
          }
}

if (window.addEventListener)
   window.addEventListener("load", staticbar, false)
else
   if (window.attachEvent)
       window.attachEvent("onload", staticbar)
   else
       if (document.getElementById)
           window.onload = staticbar 

/******************* FIN ******************************/

twoColLiqLt.css

Código:

@charset "utf-8";
.twoColLiqLt #registerbar {
	position: absolute;
	font-size: 8x;
	height: 130px;
	width: 441px;
	background-color: #ffffff;
	border: 1px solid #000000;
	font-size: 8px;
}
.twoColLiqLt #registerbar #titulo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8x;
	color: #ffffff;
	background-color: #ffffff;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ffffff;
	background-repeat: repeat-y;
	font-weight: bold;
}
.robapaginas{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8x;
  color: #000000;
}

Si querés les podés sacar algun código que este al pepe, jeje, salu2

KevinTech · #7 (**permalink**) 28/07/2008, 19:21

muy bueno amigo, lo monté en un html creado en dreamweaver e hice el .js y .css y los enlaze y me funciono todo,... pero a mi me interesaba ponerlo mas qe todo en un blog qe tengo en blogger e hice lo mismo, monte los .js y .css a un servidor luego puse el "popup" en el blog pero no me funciona del todo pues no se mueve se qeda estático en un lugar :( ... podrías ayudarme??