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

本文实例讲述了jQuery实现的自定义弹出层效果。分享给大家供大家参考，具体如下：

dialog.css：

#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;
  
}
#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;
  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;
}

dialog.js：

;(function ($) {
  //默认参数
  var PARAMS;
  var DEFAULTPARAMS = { Title: "弹出层的标题", Content: "", Width: 400, Height: 300, URL: "", /confirm/iFun: new Object, CancelFun: new Object };
  var ContentWidth = 0;
  var ContentHeight = 0;
  $.DialogBySHF = {
    //弹出提示框
    alert: function (params) {
      Show(params, "alert");
    },
    //弹出确认框
    /confirm/i: function (params) { Show(params, "/confirm/i"); },
    //弹出引用其他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/i") {
 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 #btnDialogBySHF/confirm/i").click(function () {
 $.DialogBySHF.Close();
 if ($.isFunction(PARAMS./confirm/iFun)) {
   PARAMS.ConfirmFun();
 }
      })
    }
    if (caller == "/confirm/i") {
      $("#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);

demo.html：

input[type="button"] {
  margin: 100px 20px;
  padding: 10px;
}

效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。