jQuery弹出框代码封装DialogHelper

看了jQueryUI Dialog的例子，效果还不错，就是用起来有点儿别扭，写出的代码有点拧巴，需要再封装一下！于是就有了下面这个简单的DialogHelper辅助类，因为这篇文章分享的重点是思路，所以目前版本的代码也还非常粗糙。思路对了，后续再封装成什么样都不过是形式而已，希望这个思路能给大家点启迪，同时欢迎大家开拓思维，提出更好的改进意见。

//require ScrollHelper.js

function DialogHelper() {

var _this = this;

var doc = window.document;

_this.maskDiv = null;

_this.contentDiv = null;

var options = {

opacity: 0.4

};

this.popup = function (contentdiv, optionArg) {

if (optionArg) {

for (var prop in optionArg) {

options[prop] = optionArg[prop];

}

}

_this.contentDiv = contentdiv || _this.contentDiv;

_this.maskDiv = $('

');

_this.maskDiv.addClass('MaskDiv');

_this.maskDiv.css({

'filter': "Alpha(opacity=" + ( options.opacity - "0" ) * 100 + ");",

'opacity': options.opacity,

'display': 'block'

});

$(doc.body).append(_this.maskDiv);

if (_this.contentDiv) {

$(doc.body).append(_this.contentDiv);

_this.contentDiv.show();

_this.contentDiv.draggable({

containment: "document",

cursor: 'move',

handle: ".Dialog_Head"

});

$(_this.maskDiv).on("mousemove", function() {

$("body").preventScroll();

});

$(_this.maskDiv).on("mouseout", function() {

$("body").liveScroll();

});

if ($(".cke").length == 0 && $(".Dialog_Body").length > 0) {

$(".Dialog_Body").preventOuterScroll();

}

}

};

this.remove = function () {

if (_this.contentDiv) {

_this.contentDiv.remove();

}

if (_this.maskDiv) {

_this.maskDiv.remove();

}

$("body").liveScroll();

};

this.formatPercentNumber = function (value, whole) {

if (isNaN(value) && typeof value === "string") {

if (value.indexOf("%") !== -1) {

value = (value.replace("%", "") / 100) * whole;

} else if (value.indexOf("px") !== -1) {

value = value.replace("px", "");

}

}

return Math.ceil(value);

};

this.position = function (dialog, dialogBody, minusHeight) {

dialog = dialog || $(".ShowDialogDiv");

if (dialog[0]) {

var clientWidth = document.documentElement.clientWidth;

var clientHeight = document.documentElement.clientHeight;

var width = _this.formatPercentNumber(dialog.data("position").width, clientWidth) || dialog.width();

var height = _this.formatPercentNumber(dialog.data("position").height, clientHeight) || dialog.height();

width = width < 300 ? 300 : width;

height = height < 450 ? 450 : height;

$(dialog).css({

"width": width + "px",

"height": height + "px",

"top": Math.ceil((clientHeight - height) / 2) + "px",

"left": Math.ceil((clientWidth - width) / 2) + "px"

});

dialogBody = dialogBody || $(".Dialog_Body");

if (dialogBody[0]) {

minusHeight = minusHeight || ($(".Dialog_Head").outerHeight() + $(".Dialog_Foot").outerHeight());

var dialogBodyHeight = height - minusHeight;

dialogBody.height(dialogBodyHeight);

}

}

}

}

var createDialogTemplate = function (optionArg, contentHtml, saveBtnClickHandler) {

var options = {

"Action": "",

"Title": "",

"Width": "50%",

"Height": "50%"

};

if (optionArg) {

for (var prop in optionArg) {

options[prop] = optionArg[prop];

}

}

var newDialog = $("

");

var DialogHead = $("

").appendTo(newDialog);

$("").html(options.Action + " " + options.Title).appendTo(DialogHead);

var DialogClose = $("").appendTo(DialogHead);

var DialogBody = $("

").html(contentHtml).appendTo(newDialog);

var DialogFoot = $("

").appendTo(newDialog);

var newDiv = $("

").appendTo(DialogFoot);

var ActionCancelDiv = $("

").appendTo(newDiv);

DialogClose.on("click", function() {

dialogHelper.remove();

});

ActionCancelDiv.on("click", function() {

dialogHelper.remove();

});

var newA = $("

").appendTo(ActionCancelDiv);

$("

").appendTo(newA);

$("

").html("Cancel").appendTo(newA);

var ActionSaveDiv = $("

").appendTo(newDiv);

var newB = $("

").appendTo(ActionSaveDiv);

newB.on('click', function () {

if (typeof saveBtnClickHandler == "function") {

saveBtnClickHandler();

}

});

$("

").appendTo(newB);

$("

").html("Save").appendTo(newB);

var minusHeight = DialogHead.outerHeight() + DialogFoot.outerHeight();

newDialog.data("position", {

width: options.Width,

height: options.Height

});

dialogHelper.position(newDialog, DialogBody, minusHeight);

return newDialog;

};

var changeDialogLayout = function(optionArg, dialogObj) {

var options = {

"Width": "70%",

"Height": "90%"

};

if (optionArg) {

for (var prop in optionArg) {

options[prop] = optionArg[prop];

}

}

var DialogBody = $(dialogObj).find(".Dialog_Body");

var DialogHead = $(dialogObj).find(".Dialog_Head");

var DialogFoot = $(dialogObj).find(".Dialog_Foot");

var other =  Math.round(DialogBody.css("padding-top").replace(/[a-z]/ig, "")) + Math.round(DialogBody.css("padding-bottom").replace(/[a-z]/ig, ""));

var minusHeight = DialogHead.outerHeight() + DialogFoot.outerHeight() + other;

dialogObj.data("position", {

width: options.Width,

height: options.Height

});

dialogHelper.position(dialogObj, DialogBody, minusHeight);

};

以上就是本文所分享的全部内容了，希望大家能够喜欢。相关阅读:

深入理解Hibernate中的flush机制

php实现四舍五入的方法小结

QTabWidget标签实现双击关闭的方法(推荐)

jquery实现简单的表单验证

jQuery类选择器用法实例

苹果Mac怎么查看系统版本？mac系统版本和配置情况查看教程图文介绍

浅谈javascript中call()、apply()、bind()的用法

Win7系统如何修复IE浏览器？Win7系统修复IE浏览器的方法

Win10系统玩上古卷轴5提示缺少X3DAudio1_7.dll文件的原因及解决方法

php的memcache类分享(memcache队列)

php简单开启gzip压缩方法(zlib.output_compression)

ECHO.js 纯javascript轻量级延迟加载的实例代码

简单的php+mysql聊天室实现方法(附源码)

Javascript 高级手势使用介绍

php和jquery ui弹出框,JavaScript_jQuery弹出框代码封装DialogHelper，看了jQueryUI Dialog的例子，效果 - phpStudy...相关推荐

  1. jQuery UI dialog实现dialog弹框显示

    实现弹框,比较精美的jQuery.ui.*:来实现,弹框显示: jsp页面代码[jqueryuidialog.jsp]: <%@ page language="java" i ...

  2. jQuery UI Dialog

    jQuery UI Dialog是jQuery UI的弹出对话框组件,使用它可以创建各种美观的弹出对话框:它可以设置对话框的标题.内容,并且使对话框可以拖动.调整大小.及关闭:平常主要用来替代浏览嚣自 ...

  3. 基于 jquery ui 扩展Widget

    jQuery UI CSS Framework是jQuery UI中的一个样式框架,可以利用jQuery Theme roller 来生成自己想要的css样式效果.我们可以利用jQuery UI的一些 ...

  4. 坑爹的jquery ui datepicker

    1.坑爹的jquery ui datepicker 竟然不支持选取时分秒,害的我Format半天 期间尝试了bootstrap的ditepicker,但是不起作用,发现被jquery ui 覆盖了, ...

  5. JQuery ui的旋转器（Spinner）

    Spinner可以获取输入框的是否禁用状态. 使用spinner.spinner("option","disabled") 不可用则返回true. 设置是否禁用 ...

  6. html遮罩提示框代码,基于jQuery实现弹出可关闭遮罩提示框实例代码

    jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 先给大家展示下效果图,如果大家感觉还不错,请参考实 ...

  7. Jquery UI dialog弹出层插件

    必须先下载Jquery UI插件 然后再把下载的文档复制到项目中,可以复制你需要的单个插件 --------------------------------------具体代码如下---------- ...

  8. Bootstrap警告框、弹出提示层、模态框的js插件效果总结

    Bootstrap警告框js插件 经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...

  9. 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出

    文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

最新文章

  1. 慕课网基于ElasticSearch的找房网实战开发企业级房屋搜索网项目学习心得(一)
  2. [试卷]古诗文背诵（七年级上学期）
  3. [NOTE] WindowsLinux常用环境变量
  4. VSFTPD 服务器 3秒钟搭建
  5. iOS开发--一步步教你彻底学会『iOS应用间相互跳转』
  6. C# 异步TCP Socket聊天室（1服务器，N客户端）
  7. 软件测试相关英文单词整理
  8. Python第三方库大全
  9. datastore java_Android 使用DataStore存储数据
  10. 2018这类程序员工资最高！年薪50万只能算一般
  11. Hbuilder We're sorry
  12. 每日一诗词 —— 将进酒
  13. HC-05蓝牙模块简易说明
  14. 静态网网页设计成品下载
  15. 分布式架构项目的衡量指标及其目标
  16. 使用BL0942 计量芯片获取计量数据
  17. js创建二维数组小坑
  18. ZOJ 3898 Stean (求旋转体体积与面积)
  19. 中国人工晶状体行业运行态势分析及发展战略规划建议报告2022-2028年版
  20. css基础属性(HTML的入门2)

热门文章

  1. 安装Windows，ubuntu
  2. 拥抱阿里商业操作系统，星巴克凭中国机遇，创造纳斯达克大捷！
  3. 硬盘插电脑上读不出来的解决方案
  4. CNC加工中心操作经验汇集，这次总结全了！
  5. 《UNIX网络编程 卷1：套接字联网API》学习笔记——基本TCP套接字编程
  6. 越狱的iphone4升级IOS7报3194问题解决过程
  7. 台湾服务器租用注意事项
  8. 无法识别USB设备的解决办法
  9. 终于找到如何在官网上下载VMware虚拟机了
  10. 2021 年 8 月英雄榜