一个比较完整的Div模拟对话框(ZZ)

 

  1function dialog(){
  2    var titile = '';
  3    var width = 398;
  4    var height = 180;
  5    var src = "";
  6    var path = "images/dialog/";
  7    //var imgPath = '';    
  8    var sFunc = '<input id="dialogOk" type="button" value="确 认" class="btn1" onmouseover="this.className='btn2'" onmouseout="this.className='btn1'" onclick="new dialog().reset();" /> <input id="dialogCancel" type="button" value="取 消" class="btn1" onmouseover="this.className='btn2'" onmouseout="this.className='btn1'" onclick="new dialog().reset();" />';
  9    var sClose = '<input type="image" id="dialogBoxClose" onclick="new dialog().reset();" src="' + path + 'dialogClose0.gif" border="0" width="17" height="17" onmouseover="this.src='' + path + 'dialogCloseF.gif';" onmouseout="this.src='' + path + 'dialogClose0.gif';" align="absmiddle" />';
 10    var sBody = '
 11        <table id="dialogBodyBox" border="0" align="center" cellpadding="0" cellspacing="0">
 12            <tr height="10"><td colspan="4"></td></tr>
 13            <tr>
 14                <td width="10"></td>
 15                <td width="10" align="center" valign="absmiddle"><img id="dialogBoxFace" border="0" src=""/></td>
 16                <td id="dialogMsg" style="color:#315100;font-size:14px;font-weight:bold;line-height:125%;"></td>
 17                <td width="10"></td>
 18            </tr>
 19            <tr height="10"><td colspan="4" align="center"></td></tr>
 20            <tr><td id="dialogFunc" colspan="4" align="center">' + sFunc + '</td></tr>
 21            <tr height="10"><td colspan="4" align="center"></td></tr>
 22        </table>
 23    ';
 24    var sBox = '
 25        <table id="dialogBox" width="' + width + '" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #000;display:none;z-index:10;">
 26            <tr height="26">
 27                <td style="background:url(images/dialog/tit_dialog.gif)">
 28                    <table onselectstart="return false;" style="-moz-user-select:none;" width="100%" border="0" cellpadding="0" cellspacing="0">
 29                        <tr>
 30                            <td width="6"></td>
 31                            <td id="dialogBoxTitle" onmousedown="new dialog().moveStart(event, 'dialogBox')" style="color:#2B4801;cursor:move;font-size:12px;font-weight:bold;text-align:left;">&nbsp;</td>
 32                            <td id="dialogClose" width="27" align="right" valign="middle">
 33                                ' + sClose + '
 34                            </td>
 35                            <td width="6"></td>
 36                        </tr>
 37                    </table>
 38                </td>
 39            </tr>
 40            <tr id="dialogHeight" style="height:' + height + '">
 41                <td id="dialogBody" style="background:url(images/dialog/bg_dialog.gif) left top repeat-x #FFF;">' + sBody + '</td>
 42            </tr>
 43        </table>
 44        <div id="dialogBoxShadow" style="display:none;z-index:9;"></div>
 45    ';
 46    var sBG = '
 47        <div id="dialogBoxBG" style="position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(images/blank.gif);"></div>
 48    ';
 49    function $(_sId){return document.getElementById(_sId)}
 50    this.show = function(){
 51        this.middle('dialogBox');
 52        this.shadow();
 53        //$("dialogBoxBG").style.width = document.body.scrollWidth;
 54        //$("dialogBoxBG").style.height = document.body.scrollHeight;
 55    }
 56    this.reset = function(){$('dialogBox').style.display='none';$('dialogBoxBG').style.display='none';$('dialogBoxShadow').style.display = "none";$('dialogBody').innerHTML = sBody;}    
 57    this.html = function(_sHtml){$("dialogBody").innerHTML = _sHtml;this.show();}
 58    this.init = function(){
 59        $('dialogCase') ? $('dialogCase').parentNode.removeChild($('dialogCase')) : function(){};
 60        var oDiv = document.createElement('span');
 61        oDiv.id = "dialogCase";
 62        oDiv.innerHTML = sBG + sBox;
 63        document.body.appendChild(oDiv);
 64        $('dialogBoxBG').style.height = document.body.scrollHeight;
 65    }
 66    this.button = function(_sId, _sFuc){
 67        if($(_sId)){
 68            $(_sId).style.display = '';
 69            if($(_sId).addEventListener){
 70                if($(_sId).act){$(_sId).removeEventListener('click', function(){eval($(_sId).act)}, false);}
 71                $(_sId).act = _sFuc;
 72                $(_sId).addEventListener('click', function(){eval(_sFuc)}, false);
 73            }else{
 74                if($(_sId).act){$(_sId).detachEvent('onclick', function(){eval($(_sId).act)});}
 75                $(_sId).act = _sFuc;
 76                $(_sId).attachEvent('onclick', function(){eval(_sFuc)});
 77            }
 78        }
 79    }
 80    this.shadow = function(){
 81        var oShadow = $('dialogBoxShadow');
 82        var oDialog = $('dialogBox');
 83        oShadow['style']['position'] = "absolute";
 84        oShadow['style']['background']    = "#000";
 85        oShadow['style']['display']    = "";
 86        oShadow['style']['opacity']    = "0.2";
 87        oShadow['style']['filter'] = "alpha(opacity=20)";        
 88        oShadow['style']['top'] = oDialog.offsetTop + 6;
 89        oShadow['style']['left'] = oDialog.offsetLeft + 6;
 90        oShadow['style']['width'] = oDialog.offsetWidth;
 91        oShadow['style']['height'] = oDialog.offsetHeight;
 92    }
 93    this.open = function(_sUrl, _sMode){
 94        this.show();
 95        if(!_sMode || _sMode == "no" || _sMode == "yes"){
 96            $("dialogBody").innerHTML = "<iframe width='100%' height='100%' src='" + _sUrl + "' frameborder='0' scrolling='" + _sMode + "'></iframe>";
 97        }
 98    }
 99    this.showWindow = function(_sUrl, _iWidth, _iHeight, _sMode, _sTitle){
100        var oWindow;
101        var sLeft = (screen.width) ? (screen.width - _iWidth)/2 : 0;
102        var iTop = -40 + (document.documentElement.scrollTop + document.documentElement.clientHeight - _iHeight)/2;
103        iTop = iTop > 0 ? iTop : (document.documentElement.scrollTop + document.documentElement.clientHeight - _iHeight)/2;
104        var sTop = (document.documentElement.scrollTop + document.documentElement.clientHeight) ? iTop : 0;
105        if(window.showModalDialog && _sMode == "m"){
106            oWindow = window.showModalDialog(_sUrl,_sTitle,"dialogWidth:" + _iWidth + "px;dialogheight:" + _iHeight + "px");
107        } else {
108            oWindow = window.open(_sUrl, _sTitle, 'height=' + _iHeight + ', width=' + _iWidth + ', top=' + sTop + ', left=' + sLeft + ', toolbar=no, menubar=no, scrollbars=' + _sMode + ', resizable=no,location=no, status=no');
109            this.reset();
110        }
111    }
112    this.event = function(_sMsg, _sOk, _sCancel, _sClose){
113        $('dialogFunc').innerHTML = sFunc;
114        $('dialogClose').innerHTML = sClose;
115        $('dialogBodyBox') == null ? $('dialogBody').innerHTML = sBody : function(){};
116        
117        $('dialogMsg') ? $('dialogMsg').innerHTML = _sMsg  : function(){};
118        _sOk && _sOk != "" ? this.button('dialogOk', _sOk) : $('dialogOk').style.display = 'none';
119        _sCancel && _sCancel != "5" ? this.button('dialogCancel', _sCancel) : $('dialogCancel').style.display = 'none';
120        ////_sOk ? this.button('dialogOk', _sOk) : _sOk == "" ? function(){} : $('dialogCancel').style.display = 'none';
121        ////_sCancel ? this.button('dialogCancel', _sCancel) : _sCancel == "" ? function(){} : $('dialogCancel').style.display = 'none';
122        _sClose ? this.button('dialogBoxClose', _sClose) : function(){};
123        this.show();
124    }
125    this.set = function(_oAttr, _sVal){
126        var oShadow = $('dialogBoxShadow');
127        var oDialog = $('dialogBox');
128        var oHeight = $('dialogHeight');
129
130        if(_sVal != ''){
131            switch(_oAttr){
132                case 'title':
133                    $('dialogBoxTitle').innerHTML = _sVal;
134                    title = _sVal;
135                    break;
136                case 'width':
137                    oDialog['style']['width'] = _sVal;
138                    width = _sVal;
139                    break;
140                case 'height':
141                    oHeight['style']['height'] = _sVal;
142                    height = _sVal;
143                    break;
144                case 'src':
145                    if(parseInt(_sVal) > 0){
146                        $('dialogBoxFace') ? $('dialogBoxFace').src = path + _sVal + '.gif' : function(){};                        
147                    }else{
148                        $('dialogBoxFace') ? $('dialogBoxFace').src = _sVal : function(){};
149                    }
150                    src = _sVal;
151                    break;
152            }
153        }
154        this.middle('dialogBox');
155        oShadow['style']['top'] = oDialog.offsetTop + 6;
156        oShadow['style']['left'] = oDialog.offsetLeft + 6;
157        oShadow['style']['width'] = oDialog.offsetWidth;
158        oShadow['style']['height'] = oDialog.offsetHeight;
159    }
160    this.moveStart = function (event, _sId){
161        var oObj = $(_sId);
162        oObj.onmousemove = mousemove;
163        oObj.onmouseup = mouseup;
164        oObj.setCapture ? oObj.setCapture() : function(){};
165        oEvent = window.event ? window.event : event;
166        var dragData = {x : oEvent.clientX, y : oEvent.clientY};
167        var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
168        function mousemove(){
169            var oEvent = window.event ? window.event : event;
170            var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
171            var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
172            oObj.style.left = iLeft;
173            oObj.style.top = iTop;
174            $('dialogBoxShadow').style.left = iLeft + 6;
175            $('dialogBoxShadow').style.top = iTop + 6;
176            dragData = {x: oEvent.clientX, y: oEvent.clientY};
177            
178        }
179        function mouseup(){
180            var oEvent = window.event ? window.event : event;
181            oObj.onmousemove = null;
182            oObj.onmouseup = null;
183            if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
184                oObj.style.left = backData.y;
185                oObj.style.top = backData.x;
186                $('dialogBoxShadow').style.left = backData.y + 6;
187                $('dialogBoxShadow').style.top = backData.x + 6;
188            }
189            oObj.releaseCapture ? oObj.releaseCapture() : function(){};
190        }
191    }
192    this.hideModule = function(_sType, _sDisplay){
193        var aIframe = parent.document.getElementsByTagName("iframe");aIframe=0;
194        var aType = document.getElementsByTagName(_sType);
195        var iChildObj, iChildLen;
196        for (var i = 0; i < aType.length; i++){
197            aType[i].style.display    = _sDisplay;
198        }
199        for (var j = 0; j < aIframe.length; j++){
200            iChildObj = document.frames ? document.frames[j] : aIframe[j].contentWindow;
201            iChildLen = iChildObj.document.body.getElementsByTagName(_sType).length;
202            for (var k = 0; k < iChildLen; k++){
203                iChildObj.document.body.getElementsByTagName(_sType)[k].style.display = _sDisplay;
204            }
205        }
206    }
207    this.middle = function(_sId){
208        var sClientWidth = parent ? parent.document.documentElement.clientWidth : document.documentElement.clientWidth;
209        var sClientHeight = parent ? parent.document.documentElement.clientHeight : document.documentElement.clientHeight;
210        var sScrollTop = parent ? parent.document.documentElement.scrollTop : document.documentElement.scrollTop;
211        $(_sId)['style']['display'] = '';
212        $(_sId)['style']['position'] = "absolute";
213        $(_sId)['style']['left'] = (document.documentElement.clientWidth / 2) - ($(_sId).offsetWidth / 2);
214        var sTop = -40 + (sClientHeight / 2 + sScrollTop) - ($(_sId).offsetHeight / 2);        
215        $(_sId)['style']['top'] = sTop > 0 ? sTop : (sClientHeight / 2 + sScrollTop) - ($(_sId).offsetHeight / 2);
216    }
217}
218
219function _error_msg_show(msg, click, icon, title)
220{
221    click = click ? click : ' ';
222    icon = icon ? icon : '';
223    title = title ? title : '【系统提示信息】';
224    
225    switch (icon)
226    {
227    case 'forbid':
228        icon = 1;
229        break;
230
231    case 'succ':
232        icon = 2;
233        break;
234
235    case 'smile':
236        icon = 3;
237        break;
238
239    case 'forget':
240        icon = 4;
241        break;
242
243    case 'sorry':
244        icon = 5;
245        break;
246
247    case 'care':
248        icon = 6;
249        break;
250
251    case '':
252        icon = 5;
253        break;
254    }
255    title = '<span class=MenuWhite>'+title+'</span>';
256    dg=new dialog();
257    dg.init();
258    dg.set('src', icon);
259    dg.set('title', title);
260    dg.event(msg, click, icon, click);
261}
262
263function _win_error_msg_show(msg, click, icon, top, left, width, height)
264{
265    click = click ? click : ' ';
266    icon = icon ? icon : '';
267    title = '【系统提示信息】';
268    top = top ? top : 40;
269    switch (icon)
270    {
271    case 'forbid':
272        icon = 1;
273        break;
274
275    case 'succ':
276        icon = 2;
277        break;
278
279    case 'smile':
280        icon = 3;
281        break;
282
283    case 'forget':
284        icon = 4;
285        break;
286
287    case 'sorry':
288        icon = 5;
289        break;
290
291    case 'care':
292        icon = 6;
293        break;
294
295    case '':
296        icon = 5;
297        break;
298    }
299    title = '<span class=MenuWhite>'+title+'</span>';
300    dg=new dialog();
301    dg.init();
302
303    dg.set('src', icon);
304
305    dg.set('title', title);
306    
307    if (width)
308    {
309        dg.set('width', width);
310    }
311    if (height)
312    {
313        dg.set('height', height);
314    }
315
316    dg.event(msg, click, icon, click);
317
318    
319    if (left)
320    {
321         document.getElementById('dialogBox')['style']['left'] = left;
322         document.getElementById('dialogBoxShadow')['style']['left'] = left;
323    }
324    if (top)
325    {
326     document.getElementById('dialogBox')['style']['top'] = top;
327     document.getElementById('dialogBoxShadow')['style']['top'] = top;
328    }
329
330}
331
332function _confirm_msg_show(msg, click_ok, click_no, title)
333{
334    click_ok = click_ok ? click_ok : ' ';
335    click_no = click_no ? click_no : ' ';
336    title = title ? title : '【系统提示信息】';
337
338    title = '<span class=MenuWhite>'+title+'</span>';
339    dg=new dialog();
340    dg.init();
341    dg.set('src', 6);    // smile
342    dg.set('title', title);
343    dg.event(msg, click_ok, click_no, click_no);
344}
345
346function _win_confirm_msg_show(msg, click_ok, click_no, top, left, width, height)
347{
348    click_ok = click_ok ? click_ok : ' ';
349    click_no = click_no ? click_no : ' ';
350    title = '【系统提示信息】';
351    top = top ? top : 40;
352    title = '<span class=MenuWhite>'+title+'</span>';
353    
354    dg=new dialog();
355    dg.init();
356    dg.set('src', 6);   // smile
357    dg.set('title', title);
358
359    if (width)
360    {
361        dg.set('width', width);
362    }
363    if (height)
364    {
365        dg.set('height', height);
366    }
367
368    dg.event(msg, click_ok, click_no, click_no);
369
370    if (left)
371    {
372         document.getElementById('dialogBox')['style']['left'] = left;
373         document.getElementById('dialogBoxShadow')['style']['left'] = left;
374    }
375    if (top)
376    {
377         document.getElementById('dialogBox')['style']['top'] = top;
378         document.getElementById('dialogBoxShadow')['style']['top'] = top;
379    }
380}
381