窃喜，第一次修改开源的东西
2024-05-29 16:32:15
简单的目标
以前如果为了实现类似弹出一个对话框，居中，肯定会毫不犹豫的选择一些开源插件。郁闷的是公司的项目是个旧的项目，引入各种东西都会影响界面的样式和布局，于是找了一些插件也看了一下，都比较难懂，jquery SimpleDialog-2.0.js 算是 一个比较简单的插件，因为我看懂了，
查看源码
令人费解的是，SimpleDialog-2.0.js却支持根据一段html创建多个对话框，这样，对话框的内容就变成只读的了，这个必须的改一下
SimpleDialog-2.0.js 下载地址 https://github.com/ajayhada/SimpleDialog
看了下源码，因为使用了this.html(),所以就变的不可操作了，一个html对象创建多个对话框是因为定义连变量count，没创建一个对话框count++;
var popupcss='border:'+settings.popupStyle.border+'px solid '+settings.popupStyle.bordercolor+'; border-radius:'+settings.popupStyle.borderradius+'px; background:'+settings.popupStyle.background+';z-index:4000;' + settings.popupStyle.extraCSS;
var popup = $('<DIV id="simple_popup'+count+'" style="'+popupcss+'"></DIV>');
popup.html(innerHtml + this.html());
popup.appendTo(document.body);
仔细看看源码 ，
1计算坐标的
left : (($(window).width() - $(this).outerWidth()) / 2 ) + $(window).scrollLeft(),
top : (($(window).height() - $(this).outerHeight()) / 2 ) + $(window).scrollTop(),
2生成遮罩层的
var overlaycss='';
if(settings.ismodal){
overlaycss='position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:100;opacity:'+settings.overlayStyle.opacity+';filter:Alpha(Opacity=30);background:'+settings.overlayStyle.background+';'+ + settings.overlayStyle.extraCSS;
var overlay = $('<div id="simple_popup_overlay" style="'+overlaycss+'" ></div>');
overlay.appendTo(document.body);
overlay.css({ height: $(document).height() });
overlay.fadeIn(100);
}
这两行代码是最常用的，插件实现其他的都不怎么常用
照猫画虎，画一遍
把代码留着以备不时之需
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
// left : (($(window).width() - $(this).outerWidth()) / 2 ) + $(window).scrollLeft(),
// top : (($(window).height() - $(this).outerHeight()) / 2 ) + $(window).scrollTop(),
function test(obj) {
var myleft = (($(window).width() - $(obj).outerWidth()) / 2) + $(window).scrollLeft();
var mytop = (($(window).height() - $(obj).outerHeight()) / 2) + $(window).scrollTop();
$(obj).css("left", myleft + "px");
$(obj).css("top", mytop + "px");
$(obj).css("position", "absolute");
$(obj).css("z-index", "9999");
$(obj).css("display", "block");
}
function Untest(obj) {
$(obj).css("left","auto");
$(obj).css("top", "auto");
$(obj).css("position", "");
$(obj).css("z-index", "0");
$(obj).css("display", "none");
}
function mytest() {
test($("#test"));
}
function mytest2() {
Untest($("#test"));
}
function test3() {
var overlaycss = '';
overlaycss = 'position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:100;opacity:5;filter:Alpha(Opacity=30);background:red;'
var overlay = $('<div id="simple_popup_overlay" style="' + overlaycss + '" ></div>');
overlay.appendTo(document.body);
overlay.css({ height: $(document).height() });
overlay.fadeIn(100);
test($("#test"));
}
function untest33() {
Untest($("#test"));
$("#simple_popup_overlay").remove();
}
</script>
</head>
<body>
<div style=" position:inherit; z-index:9999">
</div>
<div id="test" style=" width:200px; height:200px; background-color:Black; display:none;">
<input id="Button4" type="button" value="unbutton" onclick="untest33()" />
</div>
<input id="Button1" type="button" value="button" onclick="mytest();" />
<input id="Button2" type="button" value="unbutton" onclick="mytest2();" />
<input id="Button3" type="button" value="bkbutton" onclick="test3();" />
</body>
</html>
在把原来的代码改改，只支持实现一个对话框，这个插件就可以用了
/**
* jquery.SimpleDialog 1.0
*
* A simple dialog box jquery plugin.
*
* Author : Ajay Singh Hada
* WebPage : https://www.facebook.com/ajay.hada
* Version : 1.0
* Released: January 27, 2012
*
*
* <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
* <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
*/
(function ($) {
var settings;
var count = 0;
var self = "";
$.fn.closepopup = function (id) {
count = 0;
$(self).fadeOut(100, function () {
$(self).attr("style", "display:none;");
$("#SimpleDialogOnlyclosebutton").remove();
if (settings.ismodal) { $('#simple_popup_overlay').remove(); }
});
}
$.fn.closeAllpopup = function () {
count = 0;
$(self).fadeOut(100, function () {
$(self).attr("style", "display:none;");
$("#SimpleDialogOnlyclosebutton").remove();
if (settings.ismodal) { $('#simple_popup_overlay').remove(); }
});
}
$.fn.showpopup = function (options) {
settings = $.extend(true, {
left: (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft(),
top: (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop(),
hideinterval: 0,
hideOnClick: false,
draggable: false,
draggableContainer: 'document',
ismodal: false,
enableclose: true,
closeIcon: "",
overlayStyle: {
opacity: 0.1,
background: 'black',
extraCSS: ''
},
popupStyle: {
border: 2,
bordercolor: '#000',
borderradius: 5,
background: '#dddddd',
extraCSS: ''
}
}, options);
if (count > 0) {
//alert("对话框已经创建");
return;
}
if ($(this).attr("id") != "") {
alert($(this).attr("id"));
self = "#" + $(this).attr("id");
} else if ($(this).attr("class") != "") {
self = "." + $(this).attr("class");
} else {
$(this).attr("id", "SimpleDialogOnly");
self = "#SimpleDialogOnly";
}
var innerHtml = '';
var closebuttoncss = 'color:BLUE;margin-top:5px;margin-right:5px;float:right;';
if (settings.enableclose) {
var closeButton = 'close';
if (settings.closeIcon.length > 0) {
closeButton = '<img src="' + settings.closeIcon + '"/>';
}
innerHtml = '<a id=SimpleDialogOnlyclosebutton href="javascript:$(this).closepopup(' + count + ')" style="' + closebuttoncss + '">' + closeButton + '</a>';
}
var popupcss = 'border:' + settings.popupStyle.border + 'px solid ' + settings.popupStyle.bordercolor + '; border-radius:' + settings.popupStyle.borderradius + 'px; background:' + settings.popupStyle.background + ';z-index:4000;' + settings.popupStyle.extraCSS;
var popup = $('<DIV id="simple_popup' + count + '" style="' + popupcss + '"></DIV>');
// popup.html(innerHtml + this.html());
$(this).attr("style", popupcss);
//popup.appendTo(document.body);
$(this).prepend(innerHtml);
$(this).css({ padding: '0px', display: 'none', position: 'absolute', margin: 0, top: settings.top + 'px', left: settings.left + 'px' });
$(this).fadeIn(100);
if (settings.draggable) {
$(this).draggable({ containment: settings.draggableContainer });
}
var overlaycss = '';
if (settings.ismodal) {
overlaycss = 'position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:100;opacity:' + settings.overlayStyle.opacity + ';filter:Alpha(Opacity=30);background:' + settings.overlayStyle.background + ';' + +settings.overlayStyle.extraCSS;
var overlay = $('<div id="simple_popup_overlay" style="' + overlaycss + '" ></div>');
overlay.appendTo(document.body);
overlay.css({ height: $(document).height() });
overlay.fadeIn(100);
}
if (settings.hideinterval > 0) {
setTimeout('$(this).closepopup(' + count + ')', settings.hideinterval);
}
if (settings.hideOnClick) {
$(popup).click(function () {
$(popup).fadeOut(100, function () {
$(popup).remove();
if (settings.ismodal) { $('#simple_popup_overlay').remove(); }
});
});
}
count = 1;
};
})(jQuery);
窃喜，第一次修改开源的东西相关推荐
- 获取时间CLOCK_MONOTONIC学习——顺记第一次与开源项目交互
前段时间接触horst项目,该项目是Linux下WIFI分析软件,可在界面上显示(使用ncurses库).花了一些时间--断断续续也有几周吧,基本上大致掌握了它的流程和原理.后续再抽时间写一写其源码过 ...
- 大家谈中国：面对“双11网购第一脚”，阿里们不必窃喜
昨天就是11月11日,是光棍节,更是网购狂欢节.不过,当时针分针秒针都指向12时,福州叶先生却被老婆绑住双手.令人没想到的是,他竟然靠着双脚下单,在网上消费了两万多元.这张用脚下单的图片发上微博后,网 ...
- 《设计模式之禅》第二次重印，窃喜
前两天,编辑发邮件过来,说<设计模式之禅>第二次重印了,台湾繁体版也准备上市了,心中不仅窃喜,但同时也隐隐有点不安.窃喜的原因很简单,这本书是在今年3月份第一次印刷,然后到7月份第一次重印 ...
- 暗自窃喜中......
好不容易遇到连休两天的特殊情况,怎么会放过安排去看上海世博呢?这可是我朝思暮想的事情...考虑到白天人太多,所以决定去看夜场,夜场不仅天气凉爽而且价格也要便宜些..6/26日星期六下午3点20,我来到 ...
- 功能性农业实用技术 谋定·农业大健康-李喜贵：粤黔东西协作
功能性农业实用技术 谋定·农业大健康-李喜贵:粤黔东西协作 新闻中国采编网 中国新闻采编网 谋定研究中国智库网 国研智库 国情讲坛 谋定论道 经信研究 哲商对话 万权采编:"我院功能性农业技 ...
- 第一次做开源项目，和做SAP标准开发不同的感受
第一次做开源项目,体验和做SAP标准开发很不一样.比如我的一个bug fix和之前一个fixed issue有dependency,如果是SAP标准开发,也就是和以前做fix那位同事一个电话了解情况就 ...
- android9 mate10,华为仅这四部手机升到安卓9.0，Mate10和P20用户窃喜！
原标题:华为仅这四部手机升到安卓9.0,Mate10和P20用户窃喜! 今年谷歌在1月份的时候发布了新的安卓系统版本,Android P也就是安卓9.0,中文意思是开心果冰淇淋!这个系统版本相对上代肯 ...
- 网格建模资源管理(第一次翻译老外的东西，嘿嘿！)
网格建模资源管理(第一次翻译老外的东西,嘿嘿!) 孟培远 2005.3.4 网格建模资源管理 摘要:用网格计算的概念连接地理上彼此分布的高端资源来解决大规模的问题变得越来越流行了.网格环境中的资源管理 ...
- 【中间件-keycloak】第一次改开源中间件keycloak总个结
前言 今年5月入职一家公司,主要负责devops平台建设及开发,在之前的平台中,对接了公司统一用户中心,选择了keycloak开源中间件做为认证中心,各个子系统都通过SSO实现单点等,部分系统还适配O ...
最新文章
- Android中的帧布局
- mysql句柄是什么_MySQL与句柄
- 通过标题区别自己的发帖
- 小程序引入百度地图与uni.getLocation的使用
- method java_解析Java中的Field类和Method类
- 根据children动态复杂表头excel导出_Java高级特性-注解：注解实现Excel导出功能
- android数据截取字符串数组,android - 从Android Studio中的字符串数组获取特定字符串 - SO中文参考 - www.soinside.com...
- 北京君正：君子爱财，取之补助
- ethtool 原理介绍和解决网卡丢包排查思路（附ethtool源码下载）
- graphics | 基础绘图系统（八）——棘状图、符号图、多边形（路径）图、Cohen-Friendly关联图、条件密度图...
- 随机化算法 —— 数组置乱器的实现
- [Python] 堆叠函数 stack((a,b), axis=0)
- Laravel学习笔记之Demo1——URL生成和存储
- 【物联网毕设基础】实时时钟芯片 DS1302 介绍
- matlab中的语言,matlab语言学习MATLAB语言基础.pdf
- dq坐标系下无功功率表达式_基于自动发电控制的柔性直流输电恢复电网的控制方法_2017103002337_权利要求书_专利查询_专利网_钻瓜专利网...
- 移动联通基站定位查询
- PERT网络分析法(计划评估和审查技术)
- 2020电赛F题–简易无接触温度测量与身份识别装置
- 家用计算机手抄报,大学计算机作业手抄报