纯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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
JavaScript实现单点登录的示例
Sep 23 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的拦截器实例分析
2014/11/03 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
javascript事件问题
2009/09/05 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
js实现随机圆与矩形功能
2020/10/29 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
Python是编译运行的验证方法
2015/01/30 Python
Python 的 Socket 编程
2015/03/24 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python打开使用的方法
2019/09/30 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
python list的index()和find()的实现
2020/11/16 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
《花的勇气》教后反思
2014/02/12 职场文书
《春雨》教学反思
2014/04/24 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
人事任命书范本
2015/09/21 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python