Heim >Web-Frontend >js-Tutorial >JavaScript-Methode zum Implementieren eines Popup-Eingabeaufforderungsfelds in der unteren rechten Ecke

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

黄舟Original: 2017-12-05 14:26:286243Durchsuche

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>

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;
}

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen Sie 5 grundlegende Debugging-Fähigkeiten für das JavaScript-DebuggingNächster Artikel：Teilen Sie 5 grundlegende Debugging-Fähigkeiten für das JavaScript-Debugging

In Verbindung stehende Artikel

Mehr sehen