Home > Article > Web Front-end > JavaScript method to implement pop-up prompt box in the lower right corner

JavaScript method to implement pop-up prompt box in the lower right corner

黄舟Original: 2017-12-05 14:26:286184browse

In our daily development work, we often encounter small functions that require pop-up prompt boxes or advertisements in the lower right corner of the page. This is to provide a better user experience. So how to implement a pop-up prompt box in the lower right corner of the web page? ? Today we will introduce to you how to use JavaScript to realize the pop-up prompt box in the lower right corner!

This articleexplains with examplesThe example code of the pop-up advertising information box in the lower right corner of the web page is shared with everyone for your reference. The specific content is as follows

Rendering:

Specific 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>

The above code implements the functions we need. Here is a brief introduction to the implementation process.
Implementation principle:
The principle is very simple. Here is a brief introduction step by step:
1. Let the window be located in the lower right corner of the web page:
The implementation code is as follows:

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

The above code sets the windpop element to absolute positioning, especially its right and bottom attribute values are set to 0, so that Ensure that it is located in the lower right corner of the web page, and also set its height to 0px, which means it is hidden by default.
2. How to show and hide:
The changeH() function is called every specified time through the timer function setInterval(). This function can be based on the passed value. Constantly set the height of windpop, so as to achieve the effect of this window appearing and disappearing smoothly. The principle is roughly the same as above, so I won’t introduce it much here.

Summary:

#This article provides a better explanation to friends through examples and an introduction to the implementation process and principles. I have used JavaScript to realize the method of popping up the prompt box in the lower right corner. I believe everyone has a better understanding of this! Hope it helps with your work!

Related recommendations:

Pure js pop-up window example code in the lower right corner

js Pop-up window effect code in the lower right corner (IE only)

js realizes the pop-up window in the lower right corner imitating MSN with closing function Window code

The above is the detailed content of JavaScript method to implement pop-up prompt box in the lower right corner. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share 5 essential debugging skills for JavaScript debuggingNext article：Share 5 essential debugging skills for JavaScript debugging

See more

JavaScript method to implement pop-up prompt box in the lower right corner

Related articles