Este exemplo de artigo descreve como implementar a caixa de prompt no canto inferior direito do JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Implementar o plug -in jQuery (popup.js) na caixa prompt no canto inferior direito
Copie o código da seguinte forma: //en.fixed Code compatível com o IE6
// jQuery (função ($ j) {
// $ j ('#pop').
//})
(função ($ j) {
$ j.PositionFixed = function (el) {
$ j (el) .ECH (function () {
novo fixo (isso)
})
retornar el;
}
$ j.fn.PositionFixed = function () {
Retornar $ J.PositionFixed (isto)
}
var fixo = $ j.PositionFixed.impl = function (el) {
var o = this;
o.sts = {
Alvo: $ j (el) .css ('posição', 'fixado'),
Container: $ J (janela)
}
o.sts.currentcss = {
topo: o.sts.target.css ('top'),
Direita: O.sts.target.css ('direita'),
Inferior: O.sts.target.css ('Bottom'),
Esquerda: o.sts.target.css ('esquerda')
}
se (! O.ie6) retornar;
O.Bindevent ();
}
$ j.extend (fixo.prototype, {
IE6: $ .Browser.msie && $ .browser.version <7.0,
bindEvent: function () {
var o = this;
O.sts.target.css ('posição', 'absoluto')
O.Overrelativo (). InitBasePos ();
O.sts.target.css (o.sts.basepos)
o.sts.container.scroll (O.Scrollevent ()). Redize (O.ResizeEvent ());
o.setPos ();
},
Excedente: function () {
var o = this;
var relativo = o.sts.target.parents (). filtro (function () {
if ($ j (this) .css ('position') == 'relativo') retorne isso;
})
if (relativo.size ()> 0) relativo.
retornar o;
},
initbasepos: function () {
var o = this;
o.sts.basepos = {
topo: o.sts.target.offset (). top - (o.sts.currentcss.top == 'Auto'? O.sts.container.scrolltop (): 0),
Esquerda: O.sts.target.offset (). Esquerda - (O.sts.currentcss.left == 'Auto'? O.sts.container.scrollleft (): 0)
}
retornar o;
},
setpos: function () {
var o = this;
O.sts.target.css ({
topo: o.sts.container.scrolltop () + o.sts.basepos.top,
Esquerda: o.sts.container.scrollleft () + o.sts.basepos.left
})
},
Scrollevent: function () {
var o = this;
Return function () {
o.setPos ();
}
},
RECEDIMENTEEVENT: function () {
var o = this;
Return function () {
setTimeout (function () {
O.sts.target.css (o.sts.currentcss)
O.InitBasePos ();
O.SetPos ()
}, 1)
}
}
})
}) (jQuery)
jQuery (função ($ j) {
$ j ('#rodapé'). PositionFixed ()
})
// Função pop-up pop no canto inferior direito do pop
função pop (título, url, introdução) {
this.title = title;
this.url = url;
this.Intro = introdução;
this.apeartime = 1000;
this.hideTime = 500;
this.Delay = 10000;
// Adicione informações
this.addinfo ();
//mostrar
this.showdiv ();
//encerramento
this.Closediv ();
}
Pop.prototype = {
addinfo: function () {
$ ("#poptitle A"). Att ('href', this.url) .html (this.title);
$ ("#popintro"). html (this.Intro);
$ ("#popmore a"). att ('href', this.url);
},
showdiv: function (tempo) {
if (! ($. Browser.msie && ($ .browser.version == "6.0") &&! $. Support.style)) {
$ ('#POP'). slidown (this.apeartime) .Delay (this.delay) .Fadeout (400) ;;
} else {// Ligue para jQuery.fixed.js, resolva o problema que o IE6 não pode usar corrigido
$ ('#pop'). show ();
jQuery (função ($ j) {
$ j ('#pop'). POSITIONFIXED ()
})
}
},
fechado: function () {
$ ("#popclose"). Clique (function () {
$ ('#pop'). hide ();
}
);
}
}
Exemplo de caixa imediata no canto inferior direito
Copie o código da seguinte forma: <! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<Title> JQUERY CAINAL POPU-UPIDADE DIREITO PARTIM
</head>
<Body>
<H2> Por favor, consulte o navegador tem um canto inferior </h2>
<!-Janela pop-up jQuery Iniciar->
<script type = "text/javascript">
window.onload = function () {
var pop = novo pop ("Aqui está o título, haha",
"URL Hyperlink",
"Digite sua introdução de conteúdo, aqui está a introdução do conteúdo. Digite sua introdução de conteúdo, aqui está a introdução do conteúdo. Digite sua introdução de conteúdo, aqui está a introdução do conteúdo");
}
</script>
<script type = "text/javascript" src = "jQuery.min.js"> </script>
<script type = "text/javascript" src = "popup.js"> </script>
<div id = "pop" style = "display: Nenhum;">
<style type = "text/css">
*{} {margem: 0; preenchimento: 0;}
#pop {} {background: #ffff; largura: 260px; borda: 1px Solid #e0e0e0; font-size: 12px; posição: corrigida; direita: 10px; inferior: 10px;}
#pophead {} {altura da linha: 32px; fundo: #f6f0f3; borda-fundo: 1px Solid #e0e0e0; posição: relativa; tamanho da fonte: 12px; preenchimento: 0 0 0 10px;}
#pophead H2 {} {font-size: 14px; cor:#666; altura da linha: 32px; altura: 32px;}
#pophead #popClose {} {Position: absoluto; direita: 10px; top: 1px;}
#pophoad a#popclose: hover {} {color:#f00; cursor: pontenter;}
#popContent {} {preenchimento: 5px 10px;}
#poptitle a {} {altura da linha: 24px; font-size: 14px; font-family: 'Microsoft yahei'; cor:#333; font-woight: Bold; text-decoração: nenhum;}
#poptitle a: hover {} {color:#f60;}
#popintro {} {text-indent: 24px; altura da linha: 160%; margem: 5px 0; cor:#666;}
#popmore {} {text-align: right; borda-top: 1px pontilhado #cc; altura de linha: 24px; margem: 8px 0 0 0;}
#popmore a {} {color:#f60;}
#popmore a: hover {} {color:#f00;}
</style>
<div id = "POPhead">
<a id = "popclose"> feche </a>
<H2> lembrete quente </h2>
</div>
<div id = "PopContent">
<Dl>
<dt id = "Poptitle"> Aqui está o título </dt>
<dd id = "Popintro"> Esta é a introdução de conteúdo </dd>
</dl>
<P ID = "Popmore"> View »</p>
</div>
</div>
<!-POP POP-UP 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/> <r /> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> jQuery 右下角弹窗
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.