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 相关文章推荐
javascript 面向对象编程 function也是类
Sep 17 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
Vue实现一个无限加载列表功能
Nov 13 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
vue接口请求加密实例
Aug 11 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
jquery 插件开发备注
2010/08/27 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
jquery validate demo 基础
2015/10/29 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
javascript实现简易计算器
2017/02/01 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
利用Python抓取行政区划码的方法
2016/11/28 Python
python列表的增删改查实例代码
2018/01/30 Python
flask框架视图函数用法示例
2018/07/19 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
Python中有几个关键字
2020/06/04 Python
python3的pip路径在哪
2020/06/23 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
启动一个线程是用run()还是start()
2016/12/25 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
跟单文员岗位职责
2014/01/03 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
求职信结尾怎么写
2014/05/26 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
奖励申请报告范文
2015/05/15 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
详解OpenCV曝光融合
2022/04/29 Python
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS