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

172 阅读 0 评论 114 点赞

我是靠谱客的博主无语小猫咪，最近开发中收集的这篇文章主要介绍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;
  /*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;
  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: "", 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("<div id="DialogBySHFLayer"></div>");
    Content.push("<div id="DialogBySHF" style="width:" + PARAMS.Width + "px;height:" + PARAMS.Height + "px;left:" + positionLeft + "px;top:" + positionTop + "px;">");
    Content.push("  <div id="Title"><span>" + PARAMS.Title + "</span><span id="Close">✕</span></div>");
    Content.push("  <div id="Container" style="width:" + ContentWidth + "px;height:" + ContentHeight + "px;">");
    if (caller == "Dialog") {
      Content.push("<iframe frameborder="0" marginwidth="0" marginheight="0" src="" + PARAMS.URL + "" ></iframe>");
    }
    else {
      var TipLineHeight = ContentHeight - 60;
      Content.push("    <table>");
      Content.push("      <tr><td id="TipLine" style="height:" + TipLineHeight + "px;">" + PARAMS.Content + "</td></tr>");
      Content.push("      <tr>");
      Content.push("        <td id="BtnLine">");
      Content.push("          <input type="button" id="btnDialogBySHFConfirm" value="确定" />");
      if (caller == "Confirm") {
        Content.push("          <input type="button" id="btnDialogBySHFCancel" value="取消" />");
      }
      Content.push("        </td>");
      Content.push("      </tr>");
      Content.push("    </table>");
    }
    Content.push("  </div>");
    Content.push("</div>");
    $("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);

demo.html：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>新建H5模板</title>
<link rel="stylesheet" href="css/dialog.css" />
<style>
input[type="button"] {
  margin: 100px 20px;
  padding: 10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
</head>
<body>
<center>
<input type="button" value="弹出提示框" id="btnAlert" />
<input type="button" value="弹出确认框" id="btnConfirm" />
<input type="button" value="弹出iframe" id="btnDialog" />
</center>
<script type="text/javascript">
$(function() {
  $("#btnAlert").click(function() {
    $.DialogBySHF.Alert({
      Width: 350,
      Height: 200,
      Title: "弹出提示框",
      Content: "你好，你选择的内容是空白的",
      ConfirmFun: test
    });
  })
  $("#btnConfirm").click(function() {
    $.DialogBySHF.Confirm({
      Width: 350,
      Height: 200,
      Title: "弹出确认框",
      Content: "你确定要删除这条内容吗",
      ConfirmFun: test,
      CancelFun: testCancel
    });
  })
  $("#btnDialog").click(function() {
    $.DialogBySHF.Dialog({
      Width: 1024,
      Height: 500,
      Title: "新开一个窗口",
      URL: "http://www.uoften.com"
    });
  })
})
function test() {
  $.DialogBySHF.Alert({
    Width: 350,
    Height: 200,
    Title: "确认后执行方法",
    Content: "确认后执行的方法"
  });
}
function testCancel() {
  $.DialogBySHF.Alert({
    Width: 350,
    Height: 200,
    Title: "取消后执行方法",
    Content: "取消后执行的方法"
  });
}
</script>
</body>
</html>

效果图：

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

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