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


Posted in Javascript onSeptember 04, 2016

本文实例讲述了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: "https://3water.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程序设计有所帮助。

Javascript 相关文章推荐
js跟随滚动条滚动浮动代码
Dec 31 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
json对象转字符串如何实现
Dec 02 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 #Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 #Javascript
JS简单测试循环运行时间的方法
Sep 04 #Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 #Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 #Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 #Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 #Javascript
You might like
PHP面向对象分析设计的经验原则
2008/09/20 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
PHP的基本常识小结
2013/07/05 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
python发送邮件脚本
2018/05/22 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
安装PyInstaller失败问题解决
2019/12/14 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
python3排序的实例方法
2020/10/20 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
企业厂长岗位职责
2013/12/17 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
保险公司开门红口号
2014/06/21 职场文书
青年联谊会致辞
2015/07/31 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技