In diesem Artikel wird beschrieben, wie die Eingabeaufforderung in der unteren rechten Ecke von JS implementiert wird. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Implementieren Sie das JQuery -Plugin (popup.js) in der Eingabeaufforderung in der unteren rechten Ecke
Kopieren Sie den Code wie folgt: //en.Fixed Code, der mit IE6 kompatibel ist
// jQuery (Funktion ($ j) {
// $ j ('#pop'). PositionFixed ()
//})
(Funktion ($ j) {
$ J.PositionFixed = Funktion (el) {
$ j (el) .each (function () {
neu fix (this)
})
return el;
}
$ j.fn.positionFixed = function () {
Return $ j.PositionFixed (dies)
}
var fix = $ j.positionFixed.impl = Funktion (el) {
var o = this;
O.Sts = {
Ziel: $ j (el) .css ('Position', 'behoben'),
Container: $ J (Fenster)
}
O.Sts.Currentcss = {
Oben: O.St.target.css ('Top'),
Rechts: O.St.target.css ('Right'),
unten: O.St.target.css ('unten'),
Links: O.St.target.css ('links')
}
if (! o.ie6) kehren Sie zurück;
O.BindeDevent ();
}
$ j.extend (behoben.Prototyp, {
IE6: $ .browser.msie && $ .browser.version <7.0,
BindEvent: function () {
var o = this;
o.sts.target.css ('Position', 'Absolute')
O.Overrelative (). initbasepos ();
o.sts.target.css (O.St.basepos)
O.Sts.Container.scroll (O.ScRollevent ()). Größen Sie die Größe (O.ResizeeEvent ());
O.Setpos ();
},
Überabverletzung: function () {
var o = this;
var relative = o.sts.target.parents (). filter (function () {
if ($ j (this) .css ('Position') == 'Relative') Ret zurück;
})
if (relative.size ()> 0) relative.after (o.sts.target)
Rückkehr O;
},
initbasepos: function () {
var o = this;
o.sts.basepos = {
Oben: O.St.target.offset (). Top - (O.St.Currentcs.top == 'Auto'? O.St.Container.Scrolltop (): 0),
Links: O.St.target.offset ().
}
Rückkehr O;
},
setpos: function () {
var o = this;
o.sts.target.css ({{{
Oben: O.Sts.Container.Scrolltop () + O.St.basepos.top,
Links: O.Sts.Container.Scrollleft () + O.St.basepos.left
})
},
Scrollevent: function () {
var o = this;
return function () {
O.Setpos ();
}
},
resizeEvent: function () {
var o = this;
return function () {
setTimeout (function () {
o.sts.target.css (O.St.currentcss)
o.initbasepos ();
O.Setpos ()
}, 1)
}
}
})
}) (jQuery)
JQuery (Funktion ($ j) {
$ j ('#footer'). PositionFixed ()
})
// Pop-Popup-Funktion in der unteren rechten Ecke von Pop
Funktion Pop (Titel, URL, Intro) {
this.title = title;
this.url = url;
this.intro = intro;
this.apeartime = 1000;
this.hidetime = 500;
this.delay = 10000;
// Informationen hinzufügen
this.addinfo ();
//zeigen
this.showdiv ();
//Schließung
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: Funktion (Zeit) {
if (! ($. browser.msie && ($ .browser.version == "6.0") &&! $. Support.style)) {
$ ('#pop').
} else {// rufen
$ ('#pop'). show ();
JQuery (Funktion ($ j) {
$ j ('#pop'). PositionFixed ()
})
}
},
Closediv: function () {
$ ("#popclose"). click (function () {
$ ('#pop'). hide ();
}
);
}
}
Beispiel für die Eingabeaufforderung in der unteren rechten Ecke
Kopieren Sie den Code wie folgt: <! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> jQuery unten rechts Ecke Popup-Fenster </title>
</head>
<body>
<h2> Bitte sehen Sie, dass der Browser eine untere Ecke </H2> hat
<!-JQuery Pop-up-Fenster Start->
<script type = "text/javaScript">
window.onload = function () {
var pop = new pop ("Hier ist der Titel, haha",
"URL Hyperlink",
"Bitte geben Sie Ihre Inhaltseinführung ein. Hier ist die Einführung in der Inhalte. Bitte geben Sie Ihre Inhaltseinführung ein. Hier ist die Einführung in der Inhalte. Bitte geben Sie Ihre Inhaltseinführung ein, hier ist die Einführung in der Inhalte.").
}
</script>
<script type = "text/javaScript" src = "jQuery.min.js"> </script>
<script type = "text/javaScript" src = "popup.js"> </script>
<div id = "pop" style = "display: keine;">
<style type = "text/css">
*{} {Margin: 0; Padding: 0;}
#POP {} {Hintergrund: #ffff; Breite: 260px; Rand: 1px solide #e0e0e0; Schriftgröße: 12px; Position: Behoben; rechts: 10px; unten: 10px;}
#Popead {} {Linienhöhe: 32px; Hintergrund: #f6f0f3; Border-Bottom: 1px Solid #e0e0e0; Position: relativ; Schriftgröße: 12px; Padding: 0 0 0 10px;}
#Popead H2 {} {Schriftgröße: 14px; Farbe:#666; Zeilenhöhe: 32px; Höhe: 32px;}
#Popead #popclose {} {Position: absolut; rechts: 10px; ober: 1px;}
#popead a#popclose: hover {} {color:#f00; cursor: pointer;}
#PopContent {} {Padding: 5px 10px;}
#Poptitle a {} {Zeilenhöhe: 24px; Schriftgröße: 14px; Schriftfamilie: 'Microsoft Yahei'; Farbe:#333; Schriftgewicht: BOLD; Textdekoration: Keine;}
#poptitle a: hover {} {color:#f60;}
#POPINTRO {} {Text-Indent: 24px; Zeilenhöhe: 160%; Margin: 5px 0; Farbe:#666;}
#popmore {} {text-align: rechts; Border-Top: 1px gepunktet #ccc; Zeilenhöhe: 24px; Rand: 8px 0 0 0;}
#Popmore a {} {color:#f60;}
#Popmore A: Hover {} {Farbe:#f00;}
</style>
<div id = "pophead">
<a id = "popclose"> close </a>
<h2> warme Erinnerung </H2>
</div>
<div id = "popcontent">
<dl>
<dt id = "poptitle"> Hier ist der Titel </dt>
<dd id = "popinntro"> Dies ist die Inhaltseinführung </dd>
</dl>
<p id = "popmore"> anzeigen »</p>
</div>
</div>
<!-Pop-Pop-up-Fenster End->
<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 右下角弹窗
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.