I wrote a quick plugin to replace alert (I didn't like that I couldn't
copy and paste from the alert window, and that it was modal). I
decided to use window.open instead of absolute divs to show it. I've
also used toJSON plugin for when an object is passed in. Faced a
couple of problems with getting outerWidth of the browser in IE, and
using scrollWidth/scrollHeight to determine window size, which I'm
unsure I solved right. feedback?
<body>
<script src="jquery.js"></script>
<script src="json.js"></script>
<script>
(function($){
$.alert = function(obj,options) {
var defaults = {
maxWidth: 800,
maxHeight: 1000
};
var options = $.extend(defaults, options);
w = window.open('','','width=100,height=100,resizable=1');
if(typeof obj == "object"){
obj = "\n$.toJSON("+obj+"):\n" + $.toJSON(obj);
}
w.document.write("<body topmargin=0 leftmargin=0 style='padding:
0px;height:100%'><textarea id='ta1' wrap='off' style='background-
color:#c0c0c0;color:black;font:8pt lucida console;width:100%;height:
100%'>"+obj+"</textarea></body>");
var innerWidth = w.innerWidth ||
w.document.documentElement.clientWidth || w.document.body.clientWidth;
var innerHeight = w.innerHeight ||
w.document.documentElement.clientHeight ||
w.document.body.clientHeight;
var outerWidth = w.outerWidth+12 || innerWidth+32;
var outerHeight = w.outerHeight+12 || innerHeight+51;
var ta = $('#ta1',w.document)
var scrollX = ta[0].scrollWidth+(outerWidth-innerWidth);
var scrollY = ta[0].scrollHeight+(outerHeight-innerHeight);
w.resizeTo((scrollX>options.maxWidth)?options.maxWidth:scrollX,
(scrollY>options.maxHeight)?options.maxHeight:scrollY);
return this;
//if returning something else use "return this.pushStack
(somethingElse)" so that .end() returns this
};
})(jQuery);
$.alert(jQuery.data);
var obj = {one:"1",two:"2",three:"3",four:function(){test=1}};
$.alert(obj);
</script>
</body>
