js实现弹窗插件功能实例代码

2014-07-16

　　目前测试下：支持IE6+ 火狐谷歌游览器等。七七提示：文章较长，请您耐心阅读！

　　先来看看此组件的基本配置项：如下：
　　this.config = {
　　targetCls: '.clickElem', //点击元素
　　title: '七七世界',          //窗口标题
　　content: 'text:<p style="width:100px;height:100px">七七网站建设</p>',
　　//content: 'img:http://www.20707.net/a.jpg',
　　//窗口内容 {text:具体内容 | id:id名 | img:图片链接 |
　　//iframe:src链接} {string}
　　width:400,             //内容的宽度
　　height:300,   //内容的高度
　　theight:30,   //标题的高度默认为30
　　drag:true,    //是否可以拖动默认为true
　　time:3000, //自动关闭窗口的时间为空或'undefined'则不关闭
　　showBg:true,    //设置是否显示遮罩层默认为true 遮罩
　　closable: '#window-close', //关闭按钮
　　bgColor: '#000',   //默认颜色
　　opacity:0.5,           //默认透明度
　　position: {
　　x: 0,
　　y: 0                   //默认等于0 居中
　　},
　　zIndex:10000,
　　isScroll:true,         //默认情况下窗口随着滚动而滚动
　　isResize:true,         //默认情况下随着窗口缩放而缩放
　　callback:null 　　       //弹窗显示后回调函数
　　};

　　JS编写简单的弹窗插件(含有demo和源码)

　　当然网上这块插件非常多，本人也没有仔细看网上的插件源码只是凭着日常使用过的弹窗插件有这么多功能来实现自己的弹窗思路，当然我这个可能实现了基本功能，那么如果想做的更好更完善需要以后继续优化！如果有不足之处！请大家多多谅解！

　　由于弹窗大家都知道是个什么样的所以这次没有做演示效果图！目前测试下：支持IE6+ 火狐谷歌游览器等。

　　先来看看此组件的基本配置项：如下：

　　1. 支持配置标题内容，标题的高度内容的宽度和高度窗口是否可以拖动弹窗后是否自动关闭是否显示遮罩背景颜色及透明度的配置，及窗口的展示位置默认x轴0 y轴0是居中对齐，也可以自己配置x轴 y轴的位置但是要注意是相对于父元素那个X轴 y轴如果不指定父元素的相对定位那么默认情况下会相对于document的。当然窗口内容的宽度和高度不建议超过游览器的一屏幕的宽度和高度尽量小于第一屏的宽度和高度因为我以前用别人的弹窗插件会存在点击关闭按钮后由于游览器有滚动条点击后触发滚动条事件导致关闭不了窗口如果内容宽度和高度很大的话也没有关系窗口自动会出现滚动条的。

　　2. 窗口的内容配置项支持四种

　　1.text(文本) 可以如下配置 text:<p style="width:100px;height:100px">七七世界网站建设</p>
　　2. img(图片) 可以如下配置 img:http://www.20707.net/a.jpg
　　3. id(id节点) 可以如下配置 'id:XX'
　　4. iframe 可以如下配置 'iframe:http://www.20707.net(iframe地址)'

　　3. 提供弹窗后回调函数：如弹窗后可以做自己想做的事情。

　　所以弹窗组件也没有什么好说的当然如果要用到自己的项目中 css样式可以自己重新写的，我JS并没有写死掉只是完成JS基本弹窗业务功能。

　　HTML代码如下：

　　<div class="clickElem" style="margin-top:10px;">七七世界网站建设</div>

　　CSS代码如下

　　<style type="text/css">
　　*{margin:0;padding:0;list-style-type:none;}
　　a,img{border:0;}
　　body{font:12px/180% Arial, Helvetica, sans-serif;}
　　label{cursor:pointer;}
　　#window-box{border:5px solid #E9F3FD;background:#FFF;}
　　.windown-title{position:relative;height:30px;border:1px solid
　　　　　　 #A6C9E1;overflow:hidden;
　　　　　　 background:url(images/tipbg.png) 0 0 repeat-x;}
　　.window-title h2{padding-left:5px;font-size:14px;color:#666;}
　　#window-close{position:absolute;right:10px;top:8px;width:10px;
　　　　 height:16px;text-indent:-10em;overflow:hidden;cursor:pointer;
　　　　 background:url(images/tipbg.png) 100% -49px no-repeat;}
　　#window-content-border{padding:5px 0 5px 5px;}
　　</style>

　　JS代码如下:七七提示：代码较多，一定要耐心看完！

　　/**
　　* 编写JS弹窗组件
　　* @date 2014-07-10
　　* @author qiqi
　　* @email 361664246@qq.com
　　*/
　　function Overlay(options){
　　this.config = {
　　targetCls:'.clickElem',   //点击元素
　　title:'七七世界',     //窗口标题
　　content:'text:<p style="width:100px;height:100px">七七网站建设</p>',
　　//content:'img:http://www.20707.net/300.jpg',
　　// 窗口内容 {text:具体内容 | id:id名 | img:图片链接 |
　　// iframe:src链接} {string}
　　width:400,            //内容的宽度
　　height:300,          //内容的高度
　　theight:30,// 标题的高度默认为30
　　drag:true,            //是否可以拖动默认为true
　　time:3000,            //自动关闭窗口的时间为空或'undefined'则不关闭
　　showBg:true,          //设置是否显示遮罩层默认为true 遮罩
　　closable:'#window-close', //关闭按钮
　　bgColor:'#000', // 默认颜色
　　opacity:0.5,            // 默认透明度
　　position:{
　　x: 0,
　　y: 0                  //默认等于0 居中
　　},
　　zIndex:10000,
　　isScroll:true, 　　    //默认情况下窗口随着滚动而滚动
　　isResize:true, 　　    //默认情况下随着窗口缩放而缩放
　　callback:null 　　 //弹窗显示后回调函数
　　};
　　this.cache = {
　　isrender:true,  　　 //弹窗html结构只渲染一次
　　isshow:false,  　　   //窗口是否已经显示出来
　　moveable:false
　　};
　　this.init(options);
　　}
　　Overlay.prototype = {
　　constructor: Overlay,
　　init: function(options){
　　this.config = $.extend(this.config,options || {});
　　var self = this,
　　_config = self.config,
　　_cache = self.cache;
　　$(_config.targetCls).each(function(index,item){
　　$(item).unbind('click');
　　$(item).bind('click',function(){
　　// 渲染弹窗HTML结构
　　self._renderHTML();
　　//窗口移动
　　self._windowMove();
　　});
　　});
　　//窗口缩放
　　self._windowResize('#window-box');
　　//窗口随着滚动条一起滚动
　　self._windowIsScroll('#window-box');
　　},
　　/*
　　* 渲染弹窗HTML结构
　　*/
　　_renderHTML: function(){
　　var self = this,
　　_config = self.config,
　　_cache = self.cache;
   　　var html ='';if(_cache.isrender) {html+=
　　　　'<div id="windowbg"
　　　　style="display:none;position:absolute;top:0;left:0;">
　　　　</div>'
　　　　+ '<div id="window-box"
　　　　style="display:none;overflow:hidden;">'
　　　　+ '<div class="window-title">
　　　　<h2></h2>
　　　　<span id="window-close">关闭</span>
　　　　</div>'
　　　　+ '<div id="window-content-border">
　　　　<div id="window-content">
　　　　</div>
　　　　</div>'
　　　　+
　　　　'</div>';
　　$('body').append(html);
　　$("#windowbg").css('z-index',_config.zIndex);
　　$('#window-content-border').css({
　　　　　　　　'width':_config.width + 'px',
　　　　　　　　'height':_config.height + 'px',
　　　　　　　　'overflow':'auto'});
　　$('.window-title h2').html(_config.title);
　　$('.window-title').css({
　　　　　　　　'height':_config.theight + 'px',
　　　　　　　　'width':_config.width,
　　　　　　　　'overflow':'hidden'});
　　_cache.isrender = false;
　　//判断传递进来的内容格式
　　self._contentType();
　　if(_config.showBg) {
　　// 渲染背景宽度和高度
　　self._renderDocHeight();
　　$("#windowbg").show();
　　self.show();
　　}else {
　　$("#windowbg").hide();
　　self.show();
　　}
　　self._showDialogPosition("#window-box");
　　}else {
　　//如果弹窗已经创建出来的话, 只是隐藏掉了, 那么我们显示出来
　　self.show();
　　$("#windowbg").animate({"opacity":_config.opacity},'normal');
　　if(_config.showBg) {
　　$("#windowbg").show();
　　}
　　self._showDialogPosition("#window-box");
　　}
　　$(_config.closable).unbind('click');
　　$(_config.closable).bind('click',function(){
　　//点击关闭按钮
　　self._closed();
　　});
　　//渲染后回调函数
　　_config.callback && $.isFunction(_config.callback)
　　　　　　　&& _config.callback();
　　　　　　　},
　　/**
　　* 显示弹窗
　　*/
　　show: function(){
　　var self = this,
　　_config = self.config,
　　_cache = self.cache;
　　$("#window-box") && $("#window-box").show();
　　_cache.isshow = true;
　　if(_config.time == '' || typeof _config.time == 'undefined') {
　　return;
　　}else {
　　t && clearTimeout(t);
　　var t = setTimeout(function(){
　　self._closed();
　　},_config.time);
　　}
　　},
　　/**
　　* 隐藏弹窗
　　*/
　　hide: function(){
　　var self = this,
　　_cache = self.cache;
　　$("#window-box") && $("#window-box").hide();
　　_cache.isshow = false;
　　},
　　/**
　　*判断传进来的内容类型
　　*/
　　_contentType: function(){
　　var self = this,
　　_config = self.config,
　　_cache = self.cache;
　　var contentType = _config.content.substring(
　　　　　　　　0,_config.content.indexOf(":")
　　　　　　　　),
　　content = _config.content.substring(
　　　　　　　　_config.content.indexOf(":")
　　　　　　　　+1,_config.content.length);
　　switch(contentType) {
　　case 'text':
　　$('#window-content').html(content);
　　break;
　　case 'id':
　　$('#window-content').html($('#'+content).html());
　　break;
　　case 'img':
　　$('#window-content').html("<img
　　　　　　　　　　src='"+content+"'
　　　　　　　　　　class='window-img'/>");
　　break;
　　case 'iframe':
　　$('#window-content').html('<iframe
　　　　　　　　　　src="'+content+'"
　　　　　　　　　　width="100%"
　　　　　　　　　　height="100%"
　　　　　　　　　　scrolling="yes"
　　　　　　　　　　frameborder="0">
　　　　　　　　　　</iframe>');
　　$("#window-content-border").css({'overflow':'visible'});
　　break;
　　}
　　},
　　/**
　　* 点击关闭按钮
　　*/
　　_closed: function(){
　　var self = this,
　　_config = self.config,
　　_cache = self.cache;
　　if(_cache.isshow) {
　　self.hide();
　　}
　　if(_config.showBg) {
　　$("#windowbg").hide();
　　}
　　$("#windowbg").animate({"opacity":0},'normal');
　　},
　　/**
　　* 显示弹窗的位置默认情况下居中
　　*/
　　_showDialogPosition: function(container) {
　　var self = this,
　　_config = self.config,
　　_cache = self.cache;
　　$(container).css({'position':'absolute',
　　　　　　   'z-index':_config.zIndex + 1});
　　var offsetTop = Math.floor(
　　　　　($(window).height() - $(container).height())/2)
　　　　　+ $(document).scrollTop(),
　　offsetLeft = Math.floor(
　　　　　($(window).width() - $(container).width())/2)
　　　　　+ $(document).scrollLeft();
　　// 判断x,y位置默认是不是等于0 如是的话居中否则根据传进来的位置重新定位
　　if(0 === _config.position.x && 0 === _config.position.y){
　　$(container).offset({'top':offsetTop, 'left':offsetLeft});
　　}else{
　　$(container).offset({'top':_config.position.y,
　　　　　　 'left':_config.position.x});
　　}
　　},
　　/**
　　* 渲染底部背景的高度
　　*/
　　_renderDocHeight: function(){
　　var self = this,
　　_config = self.config;
　　$("#windowbg").animate({"opacity":_config.opacity},'normal');
　　if(self._isIE6()){
　　$("#windowbg").css({'background':'#fff',
　　　　　　　　'height':$(document).height()+'px',
　　　　　　　　'width':$(document).width()+"px"});
　　}else {
　　$("#windowbg").css({'background':_config.bgColor,
　　　　　　　　'height':$(document).height()+'px',
　　　　　　　　'width':$(document).width()+"px"});
　　}
　　},
　　/*
　　* 窗口缩放
　　*/
　　_windowResize: function(elem){
　　var self = this,
　　_config = self.config;
　　$(window).unbind('resize');
　　$(window).bind('resize',function(){
　　t && clearTimeout(t);
　　var t = setTimeout(function(){
　　if(_config.isResize){
　　self._showDialogPosition(elem);
　　self._renderDocHeight();
　　}
　　},200);
　　});
　　},
　　/**
　　* 窗口是否随着滚动条一起滚动
　　*/
　　_windowIsScroll: function(elem){
　　var self = this,
　　_config = self.config;
　　$(window).unbind('scroll');
　　$(window).bind('scroll',function(){
　　t && clearTimeout(t);
　　var t = setTimeout(function(){
　　if(_config.isScroll){
　　self._showDialogPosition(elem);
　　self._renderDocHeight();
　　}
　　},200);
　　});
　　},
　　/**
　　* 窗口移动
　　*/
　　_windowMove: function(){
　　var self = this,
　　_config = self.config,
　　_cache = self.cache;
　　var mouseX = 0,
　　mouseY = 0;
　　$('.window-title').mouseenter(function(){
　　$(this).css({'cursor':'move'});
　　});
　　$('.window-title').mouseleave(function(){
　　$(this).css({'cursor':'default'});
　　});
　　$('.window-title').mousedown(function(e){
　　_cache.moveable = true;
　　mouseX = e.clientX - $(this).offset().left;
　　mouseY = e.clientY - $(this).offset().top;
　　$('.window-title').css({'cursor':'move'});
　　});
　　$(document).mouseup(function(){
　　if(!_cache.moveable) {
　　return;
　　}
　　$('.window-title').css({'cursor':'default'});
　　_cache.moveable = false;
　　});
　　$('#window-box').mousemove(function(e){
　　if(_cache.moveable) {
　　$(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY -
mouseY + 'px'});
　　}
　　});
　　},
　　/*
　　* 判断是否是IE6游览器
　　* @return {Boolean}
　　*/
　　_isIE6: function(){
　　return navigator.userAgent.match(/MSIE 6.0/)!= null;
　　}
　　};

本文关键词：js实现弹窗 js弹窗基本配置火狐组件耐心提示支持测试文章项：谷歌插件实例代码功能