JavaScript-Methode zum Implementieren eines Popup-Eingabeaufforderungsfelds in der unteren rechten Ecke-js-Tutorial-php.cn

JavaScript-Methode zum Implementieren eines Popup-Eingabeaufforderungsfelds in der unteren rechten Ecke

黄舟

Freigeben： 2017-12-05 14:26:28

Original

6173 Leute haben es durchsucht

Bei unserer täglichen Entwicklungsarbeit stoßen wir häufig auf kleine Funktionen, die ein Popup-Eingabeaufforderungsfeld oder eine Anzeige in der unteren rechten Ecke der Seite erfordern. So implementieren Sie ein Popup Eingabeaufforderungsfeld in der unteren rechten Ecke der Webseite? Heute stellen wir Ihnen vor, wie Sie mit JavaScript das Popup-Eingabeaufforderungsfeld in der unteren rechten Ecke realisieren!

Dieser Artikel erklärt anhand von Beispielen den Beispielcode des Popup-Werbeinformationsfelds in der unteren rechten Ecke der Webseite und teilt ihn als Referenz mit allen ist wie folgt

Rendering:

Spezifischer Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>网页右下角的信息框</title>
</head>
<style type="text/css">
#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}
#winpop .title{
 width:100%;
 height:22px;
 line-height:20px;
 background:#FFCC00;
 font-weight:bold;
 text-align:center;
 font-size:12px;
}
#winpop .con{
 width:100%;
 height:90px;
 line-height:80px;
 font-weight:bold;
 font-size:12px;
 color:#FF0000;
 text-decoration:underline;
 text-align:center
}
#silu{
 font-size:12px;
 color:#666;
 position:absolute;
 right:0;
 text-decoration:underline;
 line-height:22px;
}
.close{
 position:absolute;
 right:4px;
 top:-1px;
 color:#FFF;
 cursor:pointer
}
</style>
<script type="text/javascript">
function tips_pop(){
 var MsgPop=document.getElementById("winpop");
 var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字
 if(popH==0){
 MsgPop.style.display="block";//显示隐藏的窗口
 show=setInterval("changeH(&#39;up&#39;)",2);
 }
 else{ 
 hide=setInterval("changeH(&#39;down&#39;)",2);
 }
}
function changeH(str){
 var MsgPop=document.getElementById("winpop");
 var popH=parseInt(MsgPop.style.height);
 if(str=="up"){
 if(popH<=100){
 MsgPop.style.height=(popH+4).toString()+"px";
 }
 else{ 
 clearInterval(show);
 }
 }
 if(str=="down"){ 
 if(popH>=4){ 
 MsgPop.style.height=(popH-4).toString()+"px";
 }
 else{ 
 clearInterval(hide); 
 MsgPop.style.display="none"; //隐藏p
 }
 }
}
window.onload=function(){
 var oclose=document.getElementById("close");
 var bt=document.getElementById("bt");
 document.getElementById(&#39;winpop&#39;).style.height=&#39;0px&#39;;
 setTimeout("tips_pop()",3000);
 oclose.onclick=function(){tips_pop()}
 bt.onclick=function(){tips_pop()}
}
</script>
<body>
<p id="silu">
 <button id="bt">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
</p>
<p id="winpop">
 <p class="title">您有新的短消息！<span class="close" id="close">X</span></p>
 <p class="con">1条未读信息(</p>
</p>
</body>
</html>

Nach dem Login kopieren

Der obige Code implementiert die von uns benötigten Funktionen. Hier finden Sie eine kurze Einführung in den Implementierungsprozess.
Umsetzungsprinzip:
Das Prinzip ist ganz einfach:
1. Platzieren Sie das Fenster in der unteren rechten Ecke die Webseite:
Der Implementierungscode lautet wie folgt:

#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}

Nach dem Login kopieren

Der obige Code setzt das Windpop-Element auf absolute Positionierung, insbesondere auf die richtige und Die unteren Attributwerte werden auf 0 gesetzt. Dies stellt sicher, dass es sich in der unteren rechten Ecke der Webseite befindet, und setzt außerdem seine Höhe auf 0 Pixel, was bedeutet, dass es standardmäßig ausgeblendet ist.
2. So zeigen und verbergen Sie:
Die Funktion „changeH()“ wird zu jedem angegebenen Zeitpunkt über die Timer-Funktion „setInterval()“ aufgerufen Der übergebene Wert stellt die Höhe von Windpop konstant ein, um ein reibungsloses Erscheinen und Verschwinden dieses Fensters zu erreichen. Das Prinzip ist ungefähr das gleiche wie oben, daher werde ich es hier nicht viel vorstellen.

Zusammenfassung:

Dieser Artikel verwendet Beispiele und eine Einführung in den Implementierungsprozess und die Prinzipien, um Freunden eine bessere Erklärung zu geben, die ich habe Ich habe JavaScript verwendet, um die Methode zum Einblenden des Eingabeaufforderungsfelds in der unteren rechten Ecke zu realisieren. Ich glaube, jeder hat ein besseres Verständnis dafür! Ich hoffe, es hilft Ihnen bei Ihrer Arbeit!

Verwandte Empfehlungen:

Beispielcode für ein Popup-Fenster in der unteren rechten Ecke von Pure js

js-Popup-Effektcode in der unteren rechten Ecke (nur IE)

js erkennt den Pop- oben in der unteren rechten Ecke imitiert MSN mit Schließfunktion Fenstercode

Das obige ist der detaillierte Inhalt vonJavaScript-Methode zum Implementieren eines Popup-Eingabeaufforderungsfelds in der unteren rechten Ecke. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!