纯js的右下角弹窗实例


Posted in Javascript onMarch 12, 2017

这个弹窗是如下图的效果:

纯js的右下角弹窗实例

打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个& 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的右下角弹窗实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
彻底学会Angular.js中的transclusion
Mar 12 #Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 #Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 #Javascript
前端开发之CSS原理详解
Mar 11 #Javascript
JS实现简易刻度时钟示例代码
Mar 11 #Javascript
js鼠标跟随运动效果
Mar 11 #Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 #Javascript
You might like
php简单封装了一些常用JS操作
2007/02/25 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python文件和流(实例讲解)
2017/09/12 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
开学典礼决心书
2014/03/11 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
诚信高考倡议书
2019/06/24 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang