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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
JS继承定义与使用方法简单示例
Feb 19 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
Vue.use源码分析
2017/04/22 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
解决yum对python依赖版本问题
2019/07/05 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
2019年Java面试必问之经典试题
2012/09/12 面试题
人事科岗位职责范本
2014/03/02 职场文书
生产文员岗位职责
2014/04/05 职场文书
大学生自荐材料范文
2014/12/30 职场文书
护士个人年终总结
2015/02/13 职场文书
结婚通知短信大全
2015/04/17 职场文书
旅游项目合作意向书
2015/05/08 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫