jQuery实现的自定义弹出层效果实例详解

#DialogBySHFLayer
{
  width:100%;
  height:100%;
  left:0;
  top:0;
  position:fixed;
  z-index:500;
  background-color:#333333;
  filter:alpha(Opacity=40);
  -moz-opacity:0.4;
  opacity: 0.4;
}
/*弹出的提示框*/
#DialogBySHF
{
  position:absolute;
  border-radius:3px;
  box-shadow:0 0 8px rgba(0, 0, 0, .8);
  background-color:#f2f2f2;
  z-index:600;
}
#DialogBySHF #Title
{
  margin:0;
  width:100%;
  height:35px;
  background-color:#ffa500;
  color:#FFFFFF;
  font-family: 'microsoft yahei';
  font-size:18px;
  text-align:center;
  cursor:move;
  line-height:35px;
  border-radius:3px 3px 0 0;
  -moz-user-select:none;
  -webkit-user-select:none;
  user-select:none;
}
#DialogBySHF #Close
{
  position:absolute;
  right:7px;
  top:6px;
  height:21px;
  line-height:21px;
  width:21px;
  cursor:pointer;
  display:block;
  border:1px solid #da8e02;
  box-shadow:0 0 4px rgba(255, 255, 255, .9);
  border-radius:3px;
}
#DialogBySHF #Container
{
  padding:0px 5px 5px 5px;
  /*width:390px;
  height:355px;*/
}
#DialogBySHF #Container table,#DialogBySHF #Container iframe
{
  width:100%;
  height:100%;
}
#DialogBySHF #Container table td
{
  vertical-align:middle;
}
#DialogBySHF #Container table #TipLine
{
  padding:0 30px;
  font-family: 'microsoft yahei';
}
#DialogBySHF #Container table #BtnLine
{
  height:60px;
  text-align:center;
}
#DialogBySHF #Container table #BtnLine input
{
  margin:6px 11px;
  -moz-user-select: none;
  background-color:#F5F5F5;
  background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
  background-image:-ms-linear-gradient(rgb(245, 245, 245), rgb(241, 241, 241));
  background-image:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
  border:1px solid rgba(0,0,0,0.1);
  *border:1px solid #DDDDDD;
  border:1px solid #DDDDDD\0;
  border-radius:2px;
  font-family: 'microsoft yahei';
  color:#666666;
  cursor:default;
  font-size:12px;
  font-weight:bold;
  height:29px;
  line-height:27px;
  min-width:54px;
  padding:0 8px;
  text-align:center;
}
#DialogBySHF #Container table #BtnLine input:hover
{
  background-color: #F8F8F8;
  background-image: -moz-linear-gradient(center top , #F8F8F8, #F1F1F1);
  border: 1px solid #C6C6C6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #333333;
}
#DialogBySHF #Container table #BtnLine input:focus
{
  border: 1px solid #4D90FE;
  outline: medium none;
}

;(function ($) {
  //默认参数
  var PARAMS;
  var DEFAULTPARAMS = { Title: "弹出层的标题", Content: "", Width: 400, Height: 300, URL: "", ConfirmFun: new Object, CancelFun: new Object };
  var ContentWidth = 0;
  var ContentHeight = 0;
  $.DialogBySHF = {
    //弹出提示框
    Alert: function (params) {
      Show(params, "Alert");
    },
    //弹出确认框
    Confirm: function (params) { Show(params, "Confirm"); },
    //弹出引用其他URL框
    Dialog: function (params) { Show(params, "Dialog") },
    //关闭弹出框
    Close: function () {
      $("#DialogBySHFLayer,#DialogBySHF").remove();
    }
  };
  //初始化参数
  function Init(params) {
    if (params != undefined && params != null) {
      PARAMS = $.extend({},DEFAULTPARAMS, params);
    }
    ContentWidth = PARAMS.Width - 10;
    ContentHeight = PARAMS.Height - 40;
  };
  //显示弹出框
  function Show(params, caller) {
    Init(params);
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    //在屏幕中显示的位置（正中间）
    var positionLeft = (screenWidth - PARAMS.Width) / 2 + $(document).scrollLeft();
    var positionTop = (screenHeight - PARAMS.Height) / 2 + $(document).scrollTop();
    var Content = [];
    Content.push("
");
    Content.push("
");
    Content.push("  
" + PARAMS.Title + "✕
");
    Content.push("  
");
    if (caller == "Dialog") {
      Content.push("");
    }
    else {
      var TipLineHeight = ContentHeight - 60;
      Content.push("    ");
      Content.push("      ");
      Content.push("      ");
      Content.push("        ");
      Content.push("      ");
      Content.push("    
" + PARAMS.Content + "
");
      Content.push("          ");
      if (caller == "Confirm") {
        Content.push("          ");
      }
      Content.push("        
");
    }
    Content.push("  
");
    Content.push("
");
    $("body").append(Content.join("\n"));
    SetDialogEvent(caller);
  }
  //设置弹窗事件
  function SetDialogEvent(caller) {
    //添加按钮关闭事件
    $("#DialogBySHF #Close").click(function () { $.DialogBySHF.Close();});
     //添加ESC关闭事件
    $(window).keydown(function(event){
      var event = event||window.event;
      if(event.keyCode===27){
        $.DialogBySHF.Close();
      }
    });
    //添加窗口resize时调整对话框位置
    $(window).resize(function(){
      var screenWidth = $(window).width();
      var screenHeight = $(window).height();
      var positionLeft = parseInt((screenWidth - PARAMS.Width) / 2+ $(document).scrollLeft());
      var positionTop = parseInt((screenHeight - PARAMS.Height) / 2+ $(document).scrollTop());
      $("#DialogBySHF").css({"top":positionTop+"px","left":positionLeft+"px"});
    });
    $("#DialogBySHF #Title").DragBySHF($("#DialogBySHF"));
    if (caller != "Dialog") {
      $("#DialogBySHF #btnDialogBySHFConfirm").click(function () {
        $.DialogBySHF.Close();
        if ($.isFunction(PARAMS.ConfirmFun)) {
          PARAMS.ConfirmFun();
        }
      })
    }
    if (caller == "Confirm") {
      $("#DialogBySHF #btnDialogBySHFCancel").click(function () {
        $.DialogBySHF.Close();
        if ($.isFunction(PARAMS.CancelFun)) {
          PARAMS.CancelFun();
        }
      })
    }
  }
})(jQuery);
//拖动层
(function ($) {
  $.fn.extend({
    DragBySHF: function (objMoved) {
      return this.each(function () {
        //鼠标按下时的位置
        var mouseDownPosiX;
        var mouseDownPosiY;
        //移动的对象的初始位置
        var objPosiX;
        var objPosiY;
        //移动的对象
        var obj = $(objMoved) == undefined ? $(this) : $(objMoved);
        //是否处于移动状态
        var status = false;
        //鼠标移动时计算移动的位置
        var tempX;
        var tempY;
        $(this).mousedown(function (e) {
          status = true;
          mouseDownPosiX = e.pageX;
          mouseDownPosiY = e.pageY;
          objPosiX = obj.css("left").replace("px", "");
          objPosiY = obj.css("top").replace("px", "");
        }).mouseup(function () {
          status = false;
        });
        $("body").mousemove(function (e) {
          if (status) {
            tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(objPosiX);
            tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(objPosiY);
            obj.css({ "left": tempX + "px", "top": tempY + "px" });
          }
          //判断是否超出窗体
          //计算出弹出层距离右边的位置
          var dialogRight = parseInt($(window).width())-(parseInt(obj.css("left"))+parseInt(obj.width()));
          //计算出弹出层距离底边的位置
          var dialogBottom = parseInt($(window).height())-(parseInt(obj.css("top"))+parseInt(obj.height()));
          var maxLeft = $(window).width()-obj.width();
          var maxTop = $(window).height()-obj.height();
          if(parseInt(obj.css("left"))<=0){
             obj.css("left","0px");
          }
          if(parseInt(obj.css("top"))<=0){
            obj.css("top","0px");
          }
          if(dialogRight<=0){
            obj.css("left",maxLeft+'px');
          }
        }).mouseup(function () {
          status = false;
        }).mouseleave(function () {
          status = false;
        });
      });
    }
  })
})(jQuery);