php右小角弹出框,js右下角弹出提示框示例代码
本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下
效果图:
具体代码:
网页右下角的信息框
#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
}
function tips_pop(){
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字
if(popH==0){
MsgPop.style.display="block";//显示隐藏的窗口
show=setInterval("changeH('up')",2);
}
else{
hide=setInterval("changeH('down')",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"; //隐藏DIV
}
}
}
window.οnlοad=function(){
var oclose=document.getElementById("close");
var bt=document.getElementById("bt");
document.getElementById('winpop').style.height='0px';
setTimeout("tips_pop()",3000);
oclose.οnclick=function(){tips_pop()}
bt.οnclick=function(){tips_pop()}
}
3秒后会在右下角自动弹出窗口,如果没有弹出请点击这个按钮
以上代码实现了我们需要的功能,下面简单介绍一下实现过程。
实现原理:
原理非常的简单,下面分步做一下简单的介绍:
1.让窗口居于网页的右下角:
实现代码如下:
#winpop {
width:200px;
height:0px;
position:absolute;
right:0;
bottom:0;
border:1px solid #666;
margin:0;
padding:1px;
overflow:hidden;
display:none;
}
以上代码将windpop元素设置为绝对定位,尤其是将它的right和bottom属性值设置为0,这样就保证了它位于网页的右下角,同时也将它的高度设置为0px,也就是说在默认状态下是隐藏的。
2.如何显示和隐藏:通过定时器函数setInterval()每隔指定时间调用一次changeH()函数,此函数可以根据传递的值不断的设置windpop的高度,这样就实现了此窗口平滑出现和消失的效果。原理大体如上,这里就不多介绍了。
以上就是右下角弹出提示框的实现代码,希望对大家的学习javascript程序设计有所帮助。
php右小角弹出框,js右下角弹出提示框示例代码相关推荐
- js实现删除确认提示框
js实现删除确认提示框 一.实例描述 防止用户小心单击了"删除"按钮,在用户单击"删除"按钮后,给出一个提示,让用户确认此次操作是否正确. 二.效果 三.代码 ...
- html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
- 电脑打字拼音出现下划线,没有中文提示框
电脑打字拼音出现下划线,没有中文提示框,解决办法如下: 输入法状态栏单击右键–设置–常规–最下面使用以前的版本–成功 1. 2. 3. 4. 电脑打字拼音出现中文提示框.
- 微信小程序在加载中时如何显示提示框?
链接: 微信小程序文档wx.showLoading 使用wx.showLoading() 显示 loading 提示框.需主动调用 wx.hideLoading 才能关闭提示框 在请求数据前使 ...
- mock.js 在html中使用demo示例代码
mock.js 在html中使用demo示例代码 <!DOCTYPE html> <html lang="en"> <head><meta ...
- php 右下脚弹窗,多种样式jQuery网页右下角弹出提示信息代码
多种样式jQuery网页右下角弹出提示信息代码,extjs右下角消息提示框,Jquery Messager消息弹出插件. 查看演示 下载资源: 14 次 下载资源 下载积分: 20 积分 js代码 $ ...
- JS:原生JS实现message消息提示框
简介 学习了一下如何使用原生JS(加上class类)实现message消息提示框的封装(繁琐版). 使用到的主要技术点:class类,JS. 功能点 1.四种提示状态(message success ...
- iOS native集成Weex js文件 不显示提示框问题
问题: iOS集成0.15.1版本的WeexSDK,编译器Xcode9.2,加载js文件提示框不显示问题. 如图:不显示提示框: 正常情况下: 解决方法:找到项目的info.plist,删除Main ...
- android 带箭头提示框,三种带箭头提示框总结实例
无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框. 1.通过border属性 思路:两个三角形,通过定位使 ...
最新文章
- 汇编语言第五到八章总结
- python可变序列和不可变序列_一文看懂可变序列和不可变序列
- Network simulation using OPNET
- POJ1787多重背包中在最优方案下输出具体的选择方案
- 简单文件系统的实现_300来行代码带你实现一个能跑的最小Linux文件系统
- python 无法引用 tensorflow.keras_win10+anaconda安装tensorflow和keras遇到的坑小结
- ATEN—第九章OSPF多区域的配置
- 清浊音判别 matlab,matlab语音信号处理如何判别清浊音?
- 小白视角来看传说中的卷积神经网络
- leetcode__Longest Substring Without Repeating Characters
- pandas中对列进行排序(单列/多列)/(升序/降序)/(多列升序,降序控制)
- 测试~在使用共通处理时,需要注意的问题 ~ 使用前,清空Form中的值。
- python day33
- Windows安装Linux, (WSL)Windows Subsystem for Linux
- 软件测试-微信红包测试点
- java工具类解压缩zip和rar
- 车载视频监控基于JTT808/1078管理平台商业开源
- 无线局域网WLAN的入门概念
- NYOJ 小明的调查作业
- 香港 - 寻找轻鬆攻略游(蒲台岛)