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

2019-11-20 09:05:20

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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/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;}

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: "//www.VeVB.COm"    });  })})function test() {  $.DialogBySHF.Alert({    Width: 350,    Height: 200,    Title: "确认后执行方法",    Content: "确认后执行的方法"  });}function testCancel() {  $.DialogBySHF.Alert({    Width: 350,    Height: 200,    Title: "取消后执行方法",    Content: "取消后执行的方法"  });}</script></body></html>

效果图：