jquery弹出层 wbox使用

API:WBOX DEMO API

①：引入样式文件和js

<link rel="stylesheet" type="text/css" href="${basePath}/css/default/wbox.css" />

<script type="text/javascript" src="${basePath}/js/jquery/wbox.js"></script>

还有一些图片需要导入到项目中。

wbox.js源码
/**
 * jQuery wBox plugin
 * wBox是一个轻量级的弹出窗口jQuery插件，基于jQuery1.4.2开发，
 * 主要实现弹出框的效果，并且加入了很多有趣的功能，比如可img灯箱效果，callback函数，显示隐藏层，Ajax页面，iframe嵌入页面等功能
 * @name wBox
 * @author WangYongqing - http://www.js8.in（王永清 http://www.js8.in）
 * @version 0.1
 * @copyright (c) 2010 WangYongqing (js8.in)
 * @example Visit http://www.js8.in/mywork/wBox/ for more informations about this jQuery plugin
 */
(function($){
    //class为.wBox_close为关闭
    $.fn.wBox = function(options){
        var defaults = {
            wBoxURL: "wbox/",
            opacity: 0.5,//背景透明度
            callBack: null,
            noTitle: false,
			show:false,
			timeout:0,
			target:null,
			requestType:null,//iframe,ajax,img
            title: "wBox Title",
			drag:true,
			iframeWH: {//iframe 设置高宽
                width: 400,
                height: 300
            },
            html: ''//wBox内容
        },_this=this;
		this.YQ = $.extend(defaults, options);
        var  wBoxHtml = '<div id="wBox"><div class="wBox_popup"><table><tbody><tr><td class="wBox_tl"/><td class="wBox_b"/><td class="wBox_tr"/></tr><tr><td class="wBox_b"><div style="width:10px;"> </div></td><td><div class="wBox_body">' + (_this.YQ.noTitle ? '' : '<table class="wBox_title"><tr><td class="wBox_dragTitle"><div class="wBox_itemTitle">' + _this.YQ.title + '</div></td><td width="20px" title="关闭"><div class="wBox_close"></div></td></tr></table> ') +
        '<div class="wBox_content" id="wBoxContent"></div></div></td><td class="wBox_b"><div style="width:10px;"> </div></td></tr><tr><td class="wBox_bl"/><td class="wBox_b"/><td class="wBox_br"/></tr></tbody></table></div></div>', B = null, C = null, $win = $(window),$t=$(this);//B背景，C内容jquery div   
        this.showBox=function (){
            $("#wBox_overlay").remove();
			$("#wBox").remove();
            
            B = $("<div id='wBox_overlay' class='wBox_hide'></div>").hide().addClass('wBox_overlayBG').css('opacity', _this.YQ.opacity).dblclick(function(){
                _this.close();
            }).appendTo('body').fadeIn(300);
            C = $(wBoxHtml).appendTo('body');
            handleClick();
        }
        /*
         * 处理点击
         * @param {string} what
         */
        function handleClick(){
            var con = C.find("#wBoxContent");
			if (_this.YQ.requestType && $.inArray(_this.YQ.requestType, ['iframe', 'ajax','img'])!=-1) {
				con.html("<div class='wBox_load'><div id='wBox_loading'><img src='"+_this.YQ.wBoxURL+"loading.gif' /></div></div>");				
				if (_this.YQ.requestType === "img") {
					var img = $("<img />");
					img.attr("src",_this.YQ.target);
					img.load(function(){
						img.appendTo(con.empty());
						setPosition();
					});
				}
				else 
					if (_this.YQ.requestType === "ajax") {
						$.get(_this.YQ.target, function(data){
							con.html(data);
							C.find('.wBox_close').click(_this.close);
							setPosition();
						})
						
					}
					else {
						ifr = $("<iframe name='wBoxIframe' style='width:" + _this.YQ.iframeWH.width + "px;height:" + _this.YQ.iframeWH.height + "px;' scrolling='auto' frameborder='0' src='" + _this.YQ.target + "'></iframe>");
						ifr.appendTo(con.empty());
						ifr.load(function(){
							try {
								$it = $(this).contents();
								$it.find('.wBox_close').click(_this.close);
								fH = $it.height();//iframe height
								fW = $it.width();
								w = $win;
								newW = Math.min(w.width() - 40, fW);
								newH = w.height() - 25 - (_this.YQ.noTitle ? 0 : 30);
								newH = Math.min(newH, fH);
								if (!newH) 
									return;
								var lt = calPosition(newW);
								C.css({
									left: lt[0],
									top: lt[1]
								});
								
								$(this).css({
									height: newH,
									width: newW
								});
							} 
							catch (e) {
							}
						});
					}
				
			}
			else 
				if (_this.YQ.target) {
					$(_this.YQ.target).clone(true).show().appendTo(con.empty());
					
				}
				else 
					if (_this.YQ.html) {
						con.html(_this.YQ.html);
					}
					else {
						$t.clone(true).show().appendTo(con.empty());
					}         
            afterHandleClick();
        }
        /*
         * 处理点击之后的处理
         */
        function afterHandleClick(){     
            setPosition();
            C.show().find('.wBox_close').click(_this.close).hover(function(){
                $(this).addClass("on");
            }, function(){
                $(this).removeClass("on");
            });
            $(document).unbind('keydown.wBox').bind('keydown.wBox', function(e){
                if (e.keyCode === 27) 
                    _this.close();
                return true
            });
            typeof _this.YQ.callBack === 'function' ? _this.YQ.callBack() : null;
            !_this.YQ.noTitle&&_this.YQ.drag?drag():null;
			if(_this.YQ.timeout){
                setTimeout(_this.close,_this.YQ.timeout);
            }
				
        }
        /*
         * 设置wBox的位置
         */
        function setPosition(){
            if (!C) {
                return false;
            }
			
            var width = C.width(),  lt = calPosition(width);
            C.css({
                left: lt[0],
                top: lt[1]
            });
            var $h = $("body").height(), $wh = $win.height(),$hh=$("html").height();
            $h = Math.max($h, $wh);
            B.height($h).width($win.width())            
        }
        /*
         * 计算wBox的位置
         * @param {number} w 宽度
         */
        function calPosition(w){
            l = ($win.width() - w) / 2;
            t = $win.scrollTop() + $win.height() /9;
            return [l, t];
        }
        /*
         * 拖拽函数drag
         */
        function drag(){
            var dx, dy, moveout;
            var T = C.find('.wBox_dragTitle').css('cursor', 'move');
            T.bind("selectstart", function(){
                return false;
            });
            
            T.mousedown(function(e){
                dx = e.clientX - parseInt(C.css("left"));
                dy = e.clientY - parseInt(C.css("top"));
                C.mousemove(move).mouseout(out).css('opacity', 0.8);
                T.mouseup(up);
            });
            /*
             * 移动改变生活
             * @param {Object} e 事件
             */
            function move(e){
                moveout = false;
                if (e.clientX - dx < 0) {
                    l = 0;
                }
                else 
                    if (e.clientX - dx > $win.width() - C.width()) {
                        l = $win.width() - C.width();
                    }
                    else {
                        l = e.clientX - dx
                    }
                C.css({
                    left: l,
                    top: e.clientY - dy
                });
                
            }
            /*
             * 你已经out啦！
             * @param {Object} e 事件
             */
            function out(e){
                moveout = true;
                setTimeout(function(){
                    moveout && up(e);
                }, 10);
            }
            /*
             * 放弃
             * @param {Object} e事件
             */
            function up(e){
                C.unbind("mousemove", move).unbind("mouseout", out).css('opacity', 1);
                T.unbind("mouseup", up);
            }
        }
        
        /*
         * 关闭弹出框就是移除还原
         */
        this.close=function (){
            if (C) {
                B.remove();
                C.stop().fadeOut(300, function(){
                    C.remove();
                })
            }
        }
        /*
         * 触发click事件
         */		
        $win.resize(function(){
            setPosition();
        });
		_this.YQ.show?_this.showBox():$t.click(function(){
            _this.showBox();
            return false;
        });
		return this;
    };
})(jQuery);

wbox.css 源码

#wBox .wBox_b {
	filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
  background-image:url(../../images/wbox/wbox.gif);
  width:10px;
}

#wBox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
  display:none;
}

#wBox .wBox_popup {
  position: relative;
}

#wBox table {
	border-collapse: collapse;
    border-spacing: 0;
}

#wBox td {
  border-bottom: 0;
  padding: 0;
}

#wBox .wBox_body {
  background-color:#ffffff;
    border:1px solid #4D7BE0;
}

#wBox img {
  border: 0;
  margin: 0;
}
#wBox .wBox_title {
  height:28px;
  color:#000000;
  width:100%;
  background:url(../../images/wbox/titleBG.png) repeat-x;
}
#wBox .wBox_title .wBox_itemTitle{
    padding-left:5px;
    overflow:hidden;
	font-size:14px;
font-weight:bold;
}
#wBox .wBox_title .wBox_close{
    background:url(../../images/wbox/close.png) no-repeat 0 0;
    height:14px;
    width:14px;
    overflow:hidden;
    cursor:pointer;
}
#wBox .wBox_title .on{
    background-position:0 -14px;
}
#wBox .wBox_tl, #wBox .wBox_tr, #wBox .wBox_bl, #wBox .wBox_br {
  height: 10px;
  width: 10px;
  overflow: hidden;
  background-image:url(../../images/wbox/wbox.gif);
  padding: 0;
  filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}

#wBox #wBoxContent{
	padding:3px;
}
#wBox_overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}
#wBox .wBox_load{
	width:270px;
}
.wBox_hide {
  z-index:-100;
}

.wBox_overlayBG {
  background-color: #FFF;
  z-index: 99;
}
#wBox #wBox_loading{
	width:32px;height:32px;margin:0 auto;
}

页面部分使用到wbox基本结构
  <tr>
            <td width="15%" class="table_txm"><span style="color:red;">*</span>项目名称</td>
            <td width="35%"><input name="pro.proName" id="proName" type="text" class="form_txt" maxlength="120" datatype="*1-120" nullmsg="请输入项目名称." /></td>
           	<td class="table_txm"><span style="color:red;">*</span>企业中文名称</td>
            <td>
			  <input type="text" name="pro.orgChiName" id="orgChiName" class="form_txt" maxlength="120" datatype="*1-120" nullmsg="请输入企业中文名称." />
              <input type="hidden" name="pro.relaOrgId" id="relaOrgId" />
              <input type="button" class="ImgButton" id="btn_com" value="选择" />
              <input type="button" class="ImgButton" id="reset_com" value="重置" />
			</td>
            </tr>
          <tr>

js：

/选择企业弹出层（定义弹出层使用的页面）
var wBox = $("#wbox1").wBox({title:"\u9009\u62e9\u4f01\u4e1a", target:basePath + "/credit/com_comInfo.action", requestType:"iframe", iframeWH:{width:700, height:375}});
 $("#btn_com").click(function(){
			 wBox.showBox();
		 });
		 $("#reset_com").click(function(){
		 	 clearComInfo();
		 });
		 $("#orgChiName").keyup(function(){
		 	 if($("#relaOrgId").val() != "" && inputStatus == 0) {
				if(window.confirm("需要重置企业信息吗？")) {
					clearComInfo();
				}
				inputStatus = 1;
			 }
		 });

//解决弹窗关闭后输入框得不到焦点
function resolveOpic() {
var type = document.getElementById("textarea_button_cremark");
type.click();
type.focus();
type.click();
} 
//清除企业信息
function clearComInfo() {
var fiterArray = new Array("proName", "clientName", "firRatingFee", "trackRatingFee", "payAgreement", "allowModiTerm", "orgUniCode");
$("input[name^='pro']").each(function () {
if ($.inArray($(this).attr("id"), fiterArray) == -1) {
$(this).val("");
}
});
$("select[name^='pro']").each(function () {
var id = $(this).attr("id");
$("#" + id + " option").eq(0).attr("selected", "true");
});
$("#orgMainBusi").val("");
inputStatus = 0;
}