弹窗的封装（css,js）和弹窗的例子

//每个弹窗的标识

var x =0;

var idzt = new Array();

var Window = function(config){

	//ID不重复

	idzt[x] = "zhuti"+x;  //弹窗ID

	//初始化，接收参数

	this.config = {

		width : config.width || 300, //宽度

		height : config.height || 200, //高度

		buttons : config.buttons || '', //默认无按钮

		title : config.title || '标题', //标题

		content : config.content || '内容', //内容

		isMask : config.isMask == false?false:config.isMask || true, //是否遮罩

		isDrag : config.isDrag == false?false:config.isDrag || true, //是否移动

		};

	//加载弹出窗口

	var w = ($(window).width()-this.config.width)/2;

	var h = ($(window).height()-this.config.height)/2;

	var nr = "<div class='zhuti' id='"+idzt[x]+"' bs='"+x+"' style='width:"+this.config.width+"px; height:"+this.config.height+"px; background-color:white; left:"+w+"px; top:"+h+"px;'></div>";

	$("body").append(nr);

	//加载弹窗标题

	var content ="<div id='title"+x+"' class='title' bs='"+x+"'>"+this.config.title+"<div id='close"+x+"' class='close' bs='"+x+"'>×</div></div>";

	//加载弹窗内容

	var nrh = this.config.height - 75;

	content = content+"<div id='content"+x+"' bs='"+x+"' class='content' style='width:100%; height:"+nrh+"px;'>"+this.config.content+"</div>";

	//加载按钮

	content = content+"<div id='btnx"+x+"' bs='"+x+"' class='btnx'>"+this.config.buttons+"</div>";

	//将标题、内容及按钮添加进窗口

	$('#'+idzt[x]).html(content);

	//创建遮罩层

	if(this.config.isMask)

	{

		var zz = "<div id='zz'></div>";

		$("body").append(zz);

		$("#zz").css('display','block');

	}

	//最大最小限制，以免移动到页面外

	var maxX = $(window).width()-this.config.width;

	var maxY = $(window).height()-this.config.height;

	var minX = 0,

		minY = 0;

	//窗口移动

	if(this.config.isDrag)

	{

		//鼠标移动弹出窗

		$(".title").bind("mousedown",function(e){

				var n = this.getAttribute("bs"); //取标识

				//使选中的到最上层

				$(".zhuti").css("z-index",3);

				$('#'+idzt[n]).css("z-index",4);

				//取初始坐标

				var endX = 0, //移动后X坐标

					endY = 0, //移动后Y坐标

					startX = parseInt($('#'+idzt[n]).css("left")), //弹出层的初始X坐标

					startY = parseInt($('#'+idzt[n]).css("top")), //弹出层的初始Y坐标

					downX = e.clientX, //鼠标按下时，鼠标的X坐标

					downY = e.clientY; //鼠标按下时，鼠标的Y坐标

				//绑定鼠标移动事件

				$("body").bind("mousemove",function(es){

					endX = es.clientX - downX + startX; //X坐标移动

					endY = es.clientY - downY + startY; //Y坐标移动

					//最大最小限制

					if(endX > maxX)

					{

						endX = maxX;

					} else if(endX < 0)

					{

						endX = 0;

					}

					if(endY > maxY)

					{

						endY = maxY;

					} else if(endY < 0)

					{

						endY = 0;

					}

					$('#'+idzt[n]).css("top",endY+"px");

					$('#'+idzt[n]).css("left",endX+"px");

					window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中文本

					});

			});

		//鼠标按键抬起，释放移动事件

		$("body").bind("mouseup",function(){

				$("body").unbind("mousemove");

			});

	}

	//关闭窗口

	$(".close").click(function(){

			var m = this.getAttribute("bs"); //找标识

			$('#'+idzt[m]).remove(); //移除弹窗

			$('#zz').remove(); //移除遮罩 

		})

		x++;  //标识增加

}

.zhuti { position:absolute; z-index:3; font-size:14px; border-radius:5px; box-shadow:0 0 5px white; overflow:hidden; color:#333; } 

.title { background-color:#3498db; vertical-align:middle; height:35px; width:100%; line-height:35px; text-indent:1em; } 

.close{ float:right; width:35px; height:35px; font-weight:bold; line-height:35px; vertical-align:middle; color:white; font-size:18px; } 

.close:hover { cursor:pointer; } .content { text-indent:1em; padding-top:10px; } .btnx { height:30px; width:100%; text-indent:1em; } 

.btn { height:28px; width:80px; float:left; margin-left:20px; color:#333; }

 #zz { width:100%; height:100%; opacity:0.15; display:none; background-color:#ccc; z-index:2; position:absolute; top:0px; left:0px; }<br>

弹窗的封装（css,js）和弹窗的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="jquery-1.11.2.min.js">

</script>

<script type="text/javascript" src="tanchuang.js">

</script>

<link href="tanchuang.css" rel="stylesheet" type="text/css" />

<style type="text/css">

*{

	margin: 0px auto;

}

</style>

</head>

<body style="background-color:#999">

<div style="width:200px; margin-top:10px">

<input type="button" value="弹出窗口" id="btntc" style="width:100px; height:30px; font-size:18px;" />

</div>

<div id="tc"></div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

	$('#btntc').click(function(){

			var html = "<div style='color:red'>这是测试的弹窗</div>";

			var button ="<input type='button' value='确定' /><input type='button' value='取消' />";

			var win = new Window({

				width : 800, //宽度

				height : 500, //高度

				title : '测试弹窗12345', //标题

				content : html, //内容

				isMask : false, //是否遮罩

				buttons : button, //按钮

				isDrag:true, //是否移动

				});

		})

});

</script>

</html>

弹窗的封装（css,js）和弹窗的例子的更多相关文章

js写弹窗
1.先来看弹窗的模样点击“弹出窗口”后会弹出下面窗口 2.下面是实现弹出窗口的代码,其中引入的jquery一般自己有,没有的话可以从网上下载.tanchuang.js和tanchuang.css写在 ...
js右下角弹窗代码(实测好用)
实测好用的js右下角弹窗代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
ASP&period;Net MVC4中封装CSS和js冗余代码（不让其大篇的显示在前台上）
(1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用. 由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...
C&num; 封装miniblink 使用HTML/CSS/JS来构建&period;Net 应用程序界面和简易浏览器
MiniBlink的作者是龙泉寺扫地僧 miniblink是什么? (抄了一下龙泉寺扫地僧写的简洁) Miniblink是一个全新的.追求极致小巧的浏览器内核项目,其基于chromium最新 ...
js解决弹窗问题实现班级跳转DIV示例
js解决弹窗问题实现班级跳转DIV 1.js代码如下: <%--实现班级跳转DIV--%> <div id="displayClassDiv" style=&q ...
开源组件NanUI一周年 - 使用HTML/CSS/JS来构建&period;Net Winform应用程序界面
NanUI是什么 NanUI基于ChromiumFX项目进行开发,它能让你在你的Winform应用程序中使用HTML5/CSS3/Javascript等网页技术来呈现用户界面(类似Electron). ...
NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源
NanUI文档目录 NanUI简介开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源使用网页来设计整个窗口如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...
HTML---引入css,js | 常用标签示例
一.前端基础包括哪些?如何理解二.css,js引入_及head中其他标签三.特殊符号四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...
webstorm的live templates快速编辑功能,让你的css JS代码书写速度飞起来
前言: Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码, 大大提高了HTML/CSS代码编写的速度,比如下面 ...
js活jQuery实现动态添加、移除css/js文件
下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...

随机推荐

PHP提示Deprecated&colon; mysql&lowbar;connect()&colon; The mysql extension is deprecated的解决方法
这篇文章主要介绍了PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法,是在进行PHP数据库程序开发中常会遇 ...
Subversion安装和使用
Subversion(SVN)是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说.SVN分为客户端和服务器端,一般服务器端安装在服务器上,我们开发者用的都是客户端.TortoiseSVN是 ...
iOS程序发布时出现your application is being uploaded解决办法
当用Xcode发布app时候出现“your application is being uploaded”或者用Application Loader 一直出现“ 正在通过ITUNES STORE进行鉴定 ...
tar split cat 创建、合并分卷压缩包
最近用微盘传文件遇到的问题,超过100M不能一次传啊,想想win下有rar和zip创建分卷压缩包很简单,就像linux的tar打包器应该也可以吧,搜了下,要和split配合完成具体命令如下:对文件: ...
Maven 本地资源库配置
Maven 本地资源库配置作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.操作系统环境 1>.查看操作系统环境(总共3台虚拟机) 2>.关闭防火墙并禁用开机自启动( ...
English trip V1 - 1&period;How Do You Feel Now&quest; Teacher&colon;Lamb Key&colon;形容词(Adjectives)
In this lesson you will learn to describe people, things, and feelings.在本课中,您将学习如何描述人,事和感受. STARTER ...
WPF中使用BitmapImage处理图片文件(转)
(1)图片从文件导入 BitmapImage image = new BitmapImage(); image.BeginInit(); image.UriSource = new Uri(filen ...
如何在windows平台下使用hsdis与jitwatch查看JIT后的汇编码
1. 安装hsids 这一步比较麻烦,需要提前安装cygwin,以及下载openjdk的源码具体步骤请参考下面的两篇文章 How to build hsdis-amd64.dll and hsdis ...
C++面向对象类的实例题目八
题目描述: 编写一个程序输入3个学生的英语和计算机成绩,并按照总分从高到低排序.要求设计一个学生类Student,其定义如下: 程序代码: #include<iostream> using ...
&period;NET CORE 2&period;0小白笔记（二）：VS插件 ReSharper Ultimate 2017 安装破解
采用Use License Server方式激活,如果有多台要激活的可以用一个当服务器下载网盘:链接: https://pan.baidu.com/s/1nvacvKP 密码: ipxc 版本:Je ...

弹窗的封装（css,js） 和弹窗的例子

弹窗的封装（css,js） 和弹窗的例子的更多相关文章

随机推荐

相关文章

弹窗的封装（css,js）和弹窗的例子

弹窗的封装（css,js）和弹窗的例子的更多相关文章