纯js的右下角弹窗实例
程序员文章站
2022-07-10 09:46:00
这个弹窗是如下图的效果:
打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个& times;会淡出。
采用淡入淡出是因为直接jquery一个fa...
这个弹窗是如下图的效果:
打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个& times;会淡出。
采用淡入淡出是因为直接jquery一个fadein与fadeout省事。如果采用窗口自下而上地移动,还要考虑div的position设置问题,这个问题还涉及一系列兼容性问题,很严重。
之所以称之为纯js的右下角弹窗,是因为,在任意页面,只需要如下引入jquery之后,再引入这个js,则可以使用,唯一注意就是jquery的引入一定要在这个js之前,由于我的js是全基于jquery写成的。没jquery支持可不行。
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>消息提醒</title> <script src="jquery-1.8.3.js" type="text/javascript"></script> <script src="notice_pop.js" type="text/javascript"></script> </head> <body> </body> </html>
这个弹窗的js代码notice_pop.js如下:
function pop_init(title,content) { //取当前浏览器窗口大小 var windowwidth=$(document).width(); var windowheight=$(document).height(); //弹窗的大小 var weight=320; var height=240; $("body").append( "<div id='pop_div'style='display:none;position:absolute;border:1px solid #e0e0e0;z-index:99;width:"+weight+"px;height:"+height+"px;top:"+(windowheight-height-10)+"px;left:"+(windowwidth-weight-10)+"px'>"+ "<div style='line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:14px;padding:0 0 0 10px;'>" + "<div style='float:left;'><b>"+title+"</b></div><div style='float:right;cursor:pointer;'><b onclick='pop_close()'>×</b></div>" + "<div style='clear:both'></div>"+ "</div>" + "<div id='content'>" + content+ "</div>"+ "</div>" ); } function pop_close(){ $('#pop_div').fadeout(400); } $(document).ready(function(){ pop_init("公告信息","<ul><li>sss</li><li>sss</li></ul>"); $('#pop_div').fadein(400); });
说是jquery其实更多是html的内容,关键是设置div的position为absolute,加个灰色的1px的边框给它,在zindex上面设置为最高,之后安排在 浏览器高度/宽度-其大小的位置,再摆到右下角。
在其里面的标题子面板,放两个float的div,一个在左,一个在右,以实现弹框标题和关闭按钮,分居两侧的效果,再用clear:both清请这个float。给下面的内容让路。
以上这篇纯js的右下角弹窗实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
推荐阅读
-
js 实现倒计时效果的实例代码分享
-
js实现的四级左侧网站分类菜单实例_javascript技巧
-
Java实现与JS相同的Des加解密算法完整实例
-
基于JS实现PHP的sprintf函数实例_javascript技巧
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
-
判断js数据类型的函数实例详解
-
java过滤html标签获取纯文本信息的实例
-
判断js数据类型的函数实例详解
-
利用thrift实现js与C#通讯的实例代码