Este ejemplo de artículo describe cómo implementar el cuadro de inmediato en la esquina inferior derecha de JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Implemente el complemento jQuery (popup.js) en el cuadro de inmediato en la esquina inferior derecha
Copie el código de la siguiente manera: //en. Código fijo compatible con IE6
// jQuery (function ($ j) {
// $ j ('#pop'). PositionFixed ()
//})
(función ($ j) {
$ J.PositionFixed = function (El) {
$ j (el) .each (function () {
Nuevo fijo (esto)
})
regresar el;
}
$ J.Fn.PositionFixed = function () {
devolver $ J.PositionFixed (esto)
}
var fijo = $ J.PositionFixed.impl = function (el) {
var o = esto;
o.sts = {
objetivo: $ j (el) .css ('posición', 'fijo'),
contenedor: $ j (ventana)
}
o.sts.currentcss = {
arriba: o.sts.target.css ('top'),
Derecha: o.sts.target.css ('correcto'),
Abajo: o.sts.target.css ('fondo'),
Izquierda: o.sts.target.css ('izquierda')
}
if (! O.ie6) regresar;
o.bindevent ();
}
$ J.Extend (fijo.prototype, {
IE6: $ .browser.msie && $ .browser.version <7.0,
bindEvent: functer () {
var o = esto;
o.sts.target.css ('posición', 'absoluto')
o.overrelative (). initBasePos ();
o.sts.target.css (o.sts.basepos)
o.sts.container.scroll (O.Scrollevent ()). RESEZE (O.ResizeEvent ());
O.SetPos ();
},
excesivo: function () {
var o = esto;
var relativo = o.sts.target.parents (). filtre (function () {
if ($ j (this) .css ('posición') == 'relativo') devuelve esto;
})
if (relative.size ()> 0) relativo .fter (o.sts.target)
regreso o;
},
initBasepos: function () {
var o = esto;
o.sts.basepos = {
arriba: o.sts.target.offset (). Top - (o.sts.currentcss.top == 'Auto'? O.sts.container.scrolltop (): 0),
Izquierda: o.sts.target.offset (). Izquierda - (o.sts.currentcss.left == 'Auto'? O.sts.container.scrollleft (): 0)
}
regreso o;
},
setpos: function () {
var o = esto;
o.sts.target.css ({
arriba: o.sts.container.scrolltop () + o.sts.basepos.top,
Izquierda: o.sts.container.scrollleft () + o.sts.basepos.left
})
},
scrollevent: function () {
var o = esto;
Función de retorno () {
O.SetPos ();
}
},
resizeEvent: function () {
var o = esto;
Función de retorno () {
setTimeOut (function () {
o.sts.target.css (o.sts.currentcss)
o.initbasepos ();
O.SetPos ()
}, 1)
}
}
})
}) (jQuery)
jQuery (function ($ j) {
$ j ('#pie de página'). PositionFixed ()
})
// Función emergente de pop en la esquina inferior derecha del pop
function pop (title, url, intro) {
this.title = title;
this.url = url;
this.intro = intro;
this.apeartime = 1000;
this.hidetime = 500;
this.delay = 10000;
// Agregar información
this.addinfo ();
//espectáculo
this.showDiv ();
//cierre
this.closediv ();
}
Pop.prototype = {
addInfo: function () {
$ ("#Poptitle A"). attr ('href', this.url) .html (this.title);
$ ("#popintro"). html (this.intro);
$ ("#Popmore A"). Attr ('href', this.url);
},
showDiv: function (time) {
if (! ($.. browser.msie && ($ .browser.version == "6.0") &&! $. Support.style)) {
$ ('#Pop'). SlideDown (this.
} else {// llame a jQuery.fixed.js, resuelva el problema que IE6 no puede usar Fixed
$ ('#pop'). show ();
jQuery (function ($ j) {
$ j ('#pop'). PositionFixed ()
})
}
},
cerrado: function () {
$ ("#popClose"). Click (function () {
$ ('#pop'). Hide ();
}
);
}
}
Ejemplo de cuadro de inmediato en la esquina inferior derecha
Copie el código de la siguiente manera: <! DocType Html>
<html>
<Evista>
<meta charset = "utf-8">
<title> JQuery Bajo Corner Pop-Up Window </title>
</ablo>
<Body>
<H2> Consulte el navegador tiene una esquina inferior </h2>
<!-JQuery Pop-Up Window Start->
<script type = "text/javaScript">
window.onload = function () {
var pop = new Pop ("Aquí está el título, jaja",
"Hyperlink de URL",
"Ingrese su introducción de contenido, aquí está la introducción de contenido. Ingrese su introducción de contenido, aquí está la introducción de contenido. Ingrese su introducción de contenido, aquí está la introducción de contenido");
}
</script>
<script type = "text/javaScript" src = "jQuery.min.js"> </script>
<script type = "text/javaScript" src = "popup.js"> </script>
<div id = "pop" style = "Display: None;">
<style type = "text/css">
*{} {margen: 0; relleno: 0;}
#pop {} {fondo: #ffff; ancho: 260px; borde: 1px sólido #e0e0e0; font-size: 12px; posición: fijo; derecho: 10px; fondo: 10px;}
#Pophead {} {Line-Height: 32px; Background: #F6F0F3; Border-Bottom: 1px Solid #e0e0e0; Position: Relative; Font-Size: 12px; Padding: 0 0 0 10px;}
#Pophead H2 {} {font-size: 14px; color:#666; line-height: 32px; altura: 32px;}
#Pophead #PopClose {} {posición: Absolute; derecha: 10px; top: 1px;}
#Pophead A#popclose: hover {} {color:#f00; cursor: pointer;}
#PopContent {} {Padding: 5px 10px;}
#poptitle a {} {Line-Height: 24px; font-size: 14px; font-family: 'Microsoft Yahei'; color:#333; Font-Weight: Bold; Text-Decoration: Ninguno;}
#poptitle a: hover {} {color:#f60;}
#popintro {} {text-indent: 24px; line-height: 160%; margen: 5px 0; color:#666;}
#popmore {} {text-align: right; border-top: 1px dotted #ccc; line-height: 24px; margen: 8px 0 0 0;}
#popmore a {} {color:#f60;}
#popmore a: hover {} {color:#f00;}
</style>
<div id = "pophead">
<a id = "Popclose"> Cerrar </a>
<h2> recordatorio cálido </h2>
</div>
<div id = "popcontent">
<dl>
<dt id = "poptitle"> Aquí está el título </dt>
<dd id = "popintro"> Esta es la introducción de contenido </dd>
</dl>
<P id = "Popmore"> Ver »</p>
</div>
</div>
<!-Pop Pop-Up Window End->
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <> <b r/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <> <> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <> <Br /> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> jQuery 右下角弹窗
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.