javascript modal dialog

http://www.upsaid.com/hase/index.php?action=viewcom&id=69
因为业务系统的特殊性，在web程序中经常使用modal dialog，但是showModalDialog只能在IE中使用，于是又麻烦google，终于找到了解决方案： javascript modal dialog.
为了记忆，把demo的代码抄录：

<html>

<script language=JavaScript>



 

var ModalDialogWindow;

var ModalDialogInterval;

var ModalDialog = new Object;



ModalDialog.value = '';

ModalDialog.eventhandler = '';

 



function ModalDialogMaintainFocus()

{

  try

  {

    if (ModalDialogWindow.closed)

     {

        window.clearInterval(ModalDialogInterval);

        eval(ModalDialog.eventhandler);       

        return;

     }

    ModalDialogWindow.focus(); 

  }

  catch (everything) {   }

}

        

 function ModalDialogRemoveWatch()

 {

    ModalDialog.value = '';

    ModalDialog.eventhandler = '';

 }

        

 function ModalDialogShow(Title,BodyText,Buttons,EventHandler)

 {



   ModalDialogRemoveWatch();

   ModalDialog.eventhandler = EventHandler;



   var args='width=350,height=125,left=325,top=300,toolbar=0,';

       args+='location=0,status=0,menubar=0,scrollbars=1,resizable=0';  



   ModalDialogWindow=window.open("","",args); 

   ModalDialogWindow.document.open(); 

   ModalDialogWindow.document.write('<html>');

   ModalDialogWindow.document.write('<head>'); 

   ModalDialogWindow.document.write('<title>' + Title + '</title>');

   ModalDialogWindow.document.write('<script' + ' language=JavaScript>');

   ModalDialogWindow.document.write('function CloseForm(Response) ');

   ModalDialogWindow.document.write('{ ');

   ModalDialogWindow.document.write(' window.opener.ModalDialog.value = Response; ');

   ModalDialogWindow.document.write(' window.close(); ');

   ModalDialogWindow.document.write('} ');

   ModalDialogWindow.document.write('</script' + '>');        

   ModalDialogWindow.document.write('</head>');   

   ModalDialogWindow.document.write('<body onblur="window.focus();">');

   ModalDialogWindow.document.write('<table border=0 width="95%" align=center cellspacing=0 cellpadding=2>');

   ModalDialogWindow.document.write('<tr><td align=left>' + BodyText + '</td></tr>');

   ModalDialogWindow.document.write('<tr><td align=left><br></td></tr>');

   ModalDialogWindow.document.write('<tr><td align=center>' + Buttons + '</td></tr>');

   ModalDialogWindow.document.write('</body>');

   ModalDialogWindow.document.write('</html>'); 

   ModalDialogWindow.document.close(); 

   ModalDialogWindow.focus(); 

   ModalDialogInterval = window.setInterval("ModalDialogMaintainFocus()",5);



 }





</script>



<script language=JavaScript>





  function YesNoCancel(BodyText,EventHandler)

  {

     var Buttons=''; 

     Buttons = '<a href=javascript:CloseForm("Yes");>Yes</a>  ';

     Buttons += '<a href=javascript:CloseForm("No");>No</a>  ';

     Buttons += '<a href=javascript:CloseForm("Cancel");>Cancel</a>  ';

     ModalDialogShow("Dialog",BodyText,Buttons,EventHandler);

  }



  function YesNoMaybe(BodyText,EventHandler)

  {

     var Buttons=''; 

     Buttons = '<a href=javascript:CloseForm("Yes");>Yes</a>  ';

     Buttons += '<a href=javascript:CloseForm("No");>No</a>  ';

     Buttons += '<a href=javascript:CloseForm("Maybe");>Maybe</a>  ';

     ModalDialogShow("Dialog",BodyText,Buttons,EventHandler);

  }

 

 function YesNoCancelReturnMethod()

 {

   document.getElementById('modalreturn1').value =  ModalDialog.value;

   ModalDialogRemoveWatch();

 }



 function YesNoMaybeReturnMethod()

{

    document.getElementById('modalreturn2').value = ModalDialog.value;

    ModalDialogRemoveWatch();

}





</script>

 

<BODY >



  <table border=1 cellpadding=2 cellspacing=2 align=center width="60%">

    <tr><td align=left></td></tr>

    <tr><td align=left></td></tr>



    <tr><td align=left></td></tr>

    <tr>

	   <td align=left><a href="javascript:YesNoCancel('Yes, no, or cancel me','YesNoCancelReturnMethod()');">Show Modal #1</a>   

          1. <input type=text id=modalreturn1 name=modalreturn1 value=''></td>



  	</tr>

    <tr>

	   <td align=left><a href="javascript:YesNoMaybe('Yes, no, or maybe me','YesNoMaybeReturnMethod()');">Show Modal #2</a>   

         2. <input type=text id=modalreturn2 name=modalreturn2 value=''></td>



  	</tr>

 

  </table>



</BODY>

</HTML>
javascript modal dialog

你可能感兴趣的:(javascript modal dialog)
