Cet exemple d'article décrit comment implémenter la boîte invite dans le coin inférieur droit de JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Implémentez le plugin jQuery (popup.js) dans la boîte d'invite dans le coin inférieur droit
Copiez le code comme suit: //en.Fixed Code compatible avec IE6
// jQuery (fonction ($ j) {
// $ j ('# pop'). PositionFixed ()
//})
(fonction ($ j) {
$ J.PositionFixed = fonction (el) {
$ j (el) .each (function () {
Nouveau fixe (ceci)
})
Retour El;
}
$ J.Fn.PositionFixed = fonction () {
retour $ J.Positionfixed (ceci)
}
var fixe = $ J.PositionFixed.impl = fonction (el) {
var o = this;
o.sts = {
cible: $ j (el) .css («position», «fixe»),
conteneur: $ j (fenêtre)
}
o.st.currentcss = {
en haut: o.sts.target.css ('top'),
à droite: o.sts.target.css ('droite'),
en bas: o.sts.target.css («en bas»),
à gauche: o.st.target.css («gauche»)
}
if (! o.ie6) retourner;
o.binvent ();
}
$ j.extend (fixe.prototype, {
ie6: $ .browser.msie && $ .browser.version <7.0,
rejectEvent: function () {
var o = this;
o.st.target.css («position», «absolu»)
O.Overrelative (). initBasepos ();
O.St.target.css (O.St.Basepos)
o.st.container.scroll (O.ScrOllevent ()). Resize (O.ResizEEvent ());
o.setpos ();
},
sursallative: function () {
var o = this;
var relative = o.st.target.parents (). filtre (function () {
if ($ j (this) .css ('position') == 'relative') renvoie ceci;
})
if (relative.size ()> 0) relative.after (o.st.target)
retour o;
},
initbasepos: function () {
var o = this;
o.st.basepos = {
en haut: o.sts.target.offset (). top - (o.sts.currentcss.top == 'auto'? o.st.container.scrolltop (): 0),
gauche: o.sts.target.offset (). Left - (o.sts.currentcss.left == 'auto'? O.st.container.scrollleft (): 0)
}
retour o;
},
setpos: function () {
var o = this;
o.st.target.css ({
en haut: o.st.container.scrolltop () + o.sts.basepos.top,
Gauche: o.st.container.scrollleft () + o.sts.basepos.left
})
},
scrollevent: function () {
var o = this;
return function () {
o.setpos ();
}
},
resizeevent: function () {
var o = this;
return function () {
setTimeout (function () {
o.st.target.css (o.st.currentcss)
O.InitBasepos ();
O.Setpos ()
}, 1)
}
}
})
}) (jQuery)
jQuery (fonction ($ j) {
$ j ('# footer'). PositionFixed ()
})
// Fonction pop-up pop dans le coin inférieur droit de la pop
fonction pop (titre, url, intro) {
this.title = title;
this.url = url;
this.intro = intro;
this.apeartime = 1000;
this.hidetime = 500;
this.delay = 10000;
// ajouter des informations
this.addinfo ();
//montrer
this.showDiv ();
//fermeture
this.closediv ();
}
Pop.prototype = {
addInfo: function () {
$ ("# poptitle a"). attr ('href', this.url) .html (this.title);
$ ("# popintro"). html (this.intro);
$ ("# popmore a"). att ('href', this.url);
},
showdiv: fonction (time) {
if (! ($. Browser.msie && ($ .browser.version == "6.0") &&! $.
$ ('# pop'). Slidedown (this.apeartime) .delay (this.delay) .fadeout (400) ;;
} else {// Appelez jQuery.fixed.js, résolvez le problème que IE6 ne peut pas utiliser FIXE
$ ('# pop'). show ();
jQuery (fonction ($ j) {
$ j ('# pop'). PositionFixed ()
})
}
},
fermé: fonction () {
$ ("# popclose"). Cliquez sur (fonction () {
$ ('# pop'). hide ();
}
));
}
}
Exemple de boîte d'invite dans le coin inférieur droit
Copiez le code comme suit: <! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> JQuery Lower Pop-up Fenêtre du coin inférieur </Title>
</ head>
<body>
<h2> Veuillez voir que le navigateur a un coin inférieur </h2>
<! - Fenêtre pop-up jQuery Démarrer ->
<script type = "text / javascript">
window.onload = function () {
var pop = nouveau pop ("voici le titre, haha",
"Hyperlien d'URL",
"Veuillez saisir votre introduction de contenu, voici l'introduction de contenu. Veuillez saisir votre introduction de contenu, voici l'introduction de contenu. Veuillez entrer votre contenu Introduction, voici l'introduction de contenu");
}
</cript>
<script type = "text / javascript" src = "jQuery.min.js"> </ script>
<script type = "text / javascript" src = "popup.js"> </ script>
<div id = "pop" style = "affichage: aucun;">
<style type = "text / css">
* {} {marge: 0; rembourrage: 0;}
#pop {} {background: #ffff; width: 260px; border: 1px solide # e0e0e0; font-size: 12px; position: fixe; droite: 10px; en bas: 10px;}
#pophead {} {line-height: 32px; fond: # f6f0f3; border-bottom: 1px solide # e0e0e0; position: relative; police-taille: 12px; padding: 0 0 0 10px;}
#pophead H2 {} {Font-Size: 14px; Color: # 666; line-height: 32px; hauteur: 32px;}
#pophead #popclose {} {position: absolue; à droite: 10px; en haut: 1px;}
#pophead a # popclose: volant {} {couleur: # f00; curseur: pointeur;}
#PopContent {} {padding: 5px 10px;}
#poptitle a {} {line-height: 24px; font-size: 14px; font-family: 'Microsoft yahei'; couleur: # 333; font-weight: bold; text-decoration: aucun;}
#poptitle A: Hover {} {couleur: # f60;}
#PopIntro {} {Text-Indent: 24px; line-height: 160%; marge: 5px 0; couleur: # 666;}
#Popmore {} {Text-Align: Droite; Border-Top: 1PX pointillé #CCC; Line-Height: 24px; marge: 8px 0 0 0;}
#popmore a {} {couleur: # f60;}
#Popmore A: Hover {} {Color: # f00;}
</ style>
<div id = "pophead">
<a id = "popclose"> Close </a>
<h2> Rappel chaud </h2>
</div>
<div id = "popContent">
<dl>
<dt id = "poptitle"> Voici le titre </dt>
<dd id = "popintro"> C'est l'introduction de contenu </dd>
</dl>
<p id = "Popmore"> View »</p>
</div>
</div>
<! - Fin de fenêtre pop-up pop-up ->
<br/> <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/> <br/> <br/> jQuery 右下角弹窗
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.