You are here:

Javascript/set window as always on top not working on IE

Advertisement

Expert: Rick Johnson - 2/15/2005


Question
I am using IE 6.0.26 and netscape 7.2 and i am creating a window using
window.open('abc.html','win','fullscreen=0,
toolbar=no,location=no,directories=no,status=no,
menubar=no,scrollbars=yes,resizable=no,
alwaysRaised=yes,width=400,height=100');

on an onclick event.
It is creating fine but what i want that it should remain always on top even if user minimises that window on every click.
I m using option alwaysRaised=yes .
it is working fine on netscape but not in IE.
can u help me regarging this.

thanks
neelesh

Answer
Neelesh,

A window that is always on top is known as a modal window.  Creating modal windows is not straightforward.  In fact with Windows XP security feature enabled they become a true pain in the butt.

That said attached is code by Robbie Morris.

I hope this helps,

Rick Johnson

========================== HTML ===========================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<title>window-modal</title>

<script language=JavaScript>
// by Robbie Morris
// http://www.eggheadcafe.com/articles/javascript_modal_dialog.asp

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);

}


 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

All Answers

Answers by Expert:

Ask Experts

Volunteer

Rick Johnson

Expertise

I consider myself knowledgeable in JavaScript and HTML. I hold BS in computer science and an MS in information systems. I formally managed a group that was responsible for all PCs in the worldwide research center of Kraft Food Inc. located in Glenview, Illinois. The company I currently own designs web pages for local, regional and national businesses. Many of the questions I have received required some research. This is good because it causes me to expand on my existing knowledge.

©2012 About.com, a part of The New York Times Company. All rights reserved.