简单的目标
以前如果为了实现类似弹出一个对话框，居中，肯定会毫不犹豫的选择一些开源插件。郁闷的是公司的项目是个旧的项目，引入各种东西都会影响界面的样式和布局，于是找了一些插件也看了一下，都比较难懂，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; 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; 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=" 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; 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);