简单的目标 以前如果为了实现类似弹出一个对话框，居中，肯定会毫不犹豫的选择一些开源插件。郁闷的是公司的项目是个旧的项目，引入各种东西都会影响界面的样式和布局，于是找了一些插件也看了一下，都比较难懂，jquery SimpleDialog-2.0.js 算是 一个比较简单的插件，因为我看懂了， 查看源码 令人费 ...
简单的目标
以前如果为了实现类似弹出一个对话框，居中，肯定会毫不犹豫的选择一些开源插件。郁闷的是公司的项目是个旧的项目，引入各种东西都会影响界面的样式和布局，于是找了一些插件也看了一下，都比较难懂，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 ="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
* <script type="text/javascript" src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="' + 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);
test
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：窃喜，第一次修改开源的东西
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
