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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
javascript实现倒计时关闭广告
Feb 09 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
Python Gitlab Api 使用方法
2019/08/28 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
学生自我评价范文
2014/02/02 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
民事申诉状范本
2015/05/20 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
党章学习心得体会2016
2016/01/14 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android