[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2616
  • Last Modified:

window.open always on top

Hello.
I use in Javascript code window.open(..)
the problem is that I need it to be alwas-on-top.
Like showModalDialog
but as I understand showModalDialog must use a static html file.
Do you know a solution?
Thanks, Aryeh,
see part of code I use.
var generator = window.open('','name','width=100,height=100,left=100,top=100');
var html = '<html dir=rtl><head><title>Remark Edit Popup</title>';
html += '</head>';
html += '<body bgcolor="#7DF3A6" style="border: solid 0 red;">';
html += '...';
html += '</body>';
html += '</html>';
generator.document.write(html);
generator.document.close();

Open in new window

0
tuchfeld
Asked:
tuchfeld
  • 9
  • 8
1 Solution
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Solution ? yes:

dont use window.open - most browsers does not allow to open new window by using javascript because of lot of stupid advertises there. Instead just make a DIV element that has

 width:100% and height:100%, position:fixed, and z-index:1000000  

and put content inside there. Then if you want go back, just display:none  this DIV element :)
0
 
tuchfeldAuthor Commented:
1) thx for the lesson.
2) I do not have adv in my site.
3) I have already written the code.
it there another solution that use MY approach?
Thx, Aryeh.
0
 
tuchfeldAuthor Commented:
4) also. DIV as far as  I know cannot get outside the creating window. right?
there are limitations and benifits for each approach (DIV vs. window.open)
I'll appreciate answer that relates to my approach.
Thx, Aryeh.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Well you cant set modal in normal browser window. Look at code that I gave you, its really easy
var generator = document.createElement('div');
generator.style.width="100%";
generator.style.height="100%";
generator.style.position="fixed";
generator.style.zIndex="100000";
var html = 'TITLE: Remark Edit Popup<br>';
html += '...';
generator.innerHTML=html;
 
var closer = document.createElement('button');
closer.innerHTML="Close window";
closer.onclick=function(){
generator.style.display="none";
}
generator.appendChild(closer);

Open in new window

0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Or it is possible hmm.... check this:      http://javascript.about.com/library/blmodal.htm
0
 
tuchfeldAuthor Commented:
Saturday is approachin (I'm Jew).
I'll take a look after.
Thanks for now.
Aryeh.
0
 
tuchfeldAuthor Commented:
1) I forgot to mention that I support ONLY Explorer. so the parameter "modal=yes" does not work :-(.
2) As I understand using window.showModalDialog is only for ready made pages (link).
and I generate this page dynamically.
3) If you can pls look at the full function code and give a simple suggestion. I'm not sure that transforming it to DIV is straight forward.
Thanks, Aryeh.
function rem_popup(rem_str, chap, verse, col, img_elm)
{
  var win_width = 500, win_frame_horz_gap = 4;
  var win_height = 160,
      win_frame_vert_gap = 29; // lilo.
  var win_pos_abs_x = parent.window.screenLeft + window.event.srcElement.offsetParent.offsetLeft - (win_width+win_frame_horz_gap)/2;
  var win_pos_abs_y = parent.window.screenTop + parent.document.body.offsetHeight - document.body.offsetHeight + (img_elm.offsetParent.offsetTop - parent.VRS.document.body.scrollTop) - (win_height+win_frame_vert_gap) - 1;
  //
  var win_props = "toolbar=0";
  win_props += ",menubar=0";
  win_props += ",status=0,"; // does not work? :-(.
  win_props += ",resizable=0";
  win_props += ",modal=yes"; // does not work in Exploree :-(.
  var generator = window.open('','name','width='+win_width+',height='+win_height+',left='+win_pos_abs_x+',top='+win_pos_abs_y+win_props); // todo: use showModalDialog (always on top).
  //
  var from_scratch = rem_str.length == 0;
  //
  var html = '<html dir=rtl><head><title>Remark Edit Popup</title>';
  //html += '<link rel="stylesheet" href="style.css">';
  html += '</head><script src="/asp/get_site_info.js"></script><script src="/asp/FB_Feedback.js"></script><SCRIPT src="/TH/js/TH_Utils.js"></SCRIPT>';
  html += '<body bgcolor="#7DF3A6" style="border: solid 0 red;">';
  html += '<script>function trim(s) {return s.replace(/^\s+|\s+$/g,"");}</script>';
  html += "<FRAMESET border=0>";
  html += "<FRAME id=\'EMPTY\' />";
  html += "<FRAME id=\'MAIN\'>";
 
  html += '<FORM style="border: solid 0 blue;" action="TH_Cell_Clicked.aspx?chap='+chap+'&verse='+verse+'&col='+col+'" method="post">';
  // Title:
  html += '<span style="padding-bottom: 20px;">';
  html += "ÔâèÔ âÑÕè äèç "+get_heb_number(chap)+" äáÕç "+get_heb_number(verse)+" âÞÕÓÔ "+col+"";
  html += '</span>';
  //
  html += '<div style="padding-top: 5px;">';
  // TextBox:
  html += '<TEXTAREA dir="rtl" id="remark" name="remark" style="width: 100%; height: 71px">'+rem_str+'</TEXTAREA>';
  html += '</div>';
  //
  html += '<div style="padding-top: 7px;">';
  // Send Submit Button:
  html += '<INPUT type="submit" value="Send" onclick="var rem_val=trim(getElementById(\'remark\').value); '+(from_scratch?"getElementById(\'Op_Mode\').value=\'create\';":"")+'window.clipboardData.setData(\'Text\', rem_val); if (rem_val.length==0) op=\'Cell Remark Deleted\'; else if ('+from_scratch+') op=\'New Cell Remark Created\'; else op=\'Cell Remark Edited\'; trans_th(\'TH \' + op,\''+chap+"-"+verse+"-"+col+'\');"/>';
  // Op_Mode Hidden Input:
  html += '<INPUT id="Op_Mode" name="Op_Mode" type="hidden" value="edit" />';
  // Delete Submit Button:
  html += '&nbsp;&nbsp;<INPUT type="submit" value="Delete" onclick="var rem_val=trim(getElementById(\'remark\').value); getElementById(\'Op_Mode\').value=\'delete\';window.clipboardData.setData(\'Text\', rem_val); trans_th(\'TH Cell Remark Deleted\',\'' + chap+"-"+verse+"-"+col+ '\');">';
  // Paste Button:
  html += '&nbsp;&nbsp;<INPUT type="button" value="Paste" onclick="getElementById(\'remark\').value=window.clipboardData.getData(\'Text\');">';
  // Close Link:
  html += '&nbsp;&nbsp;<a href="javascript:self.close()">Close</a>';
  //
  html += '</div>';
  // Clear Button:
  //html += '<p><INPUT type="button" value="Clear" onclick="getElementById(\'remark\').value=\'\';"></p>';
  html += '</FORM>';
  html += "</FRAME>";
  html += "</FRAMESET>";
  html += '</body>';
  html += '</html>';
  
  generator.document.write(html);
  generator.document.close();
}

Open in new window

0
 
tuchfeldAuthor Commented:
About the "DIV solution" also notice that I neet the created Window be indepentant of the creating Window. e.g. if I minimize / close the creating window I wand the "DIV window still to apear.
0
 
tuchfeldAuthor Commented:
Hi. I figured out a "tricky" solution. and it seems to work for me.
take a look at the attached code.
If you have better or more elegant solution please let me know.
Thanks, Aryeh.
var popupWin = undefined;
 
function rem_popup(rem_str, chap, verse, col, img_elm)
{
  popupWin = window.open('','_blank','...');
  
  var html = '<html dir=rtl><head><title>Remark Edit Popup</title>';
  html += '<body bgcolor="#7DF3A6" topmargin="5" style="border: solid 0 red;" onFocus="window.status=\'BODY focused\'" onBlur="window.status=\'BODY not focused\'">';
  //...
  html += '<TEXTAREA style="background-color:#FFFFE1" dir="rtl" id="remark" name="remark" style="width: 100%; height: 71px" onFocus="window.status=\'TB focused\'" onBlur="window.status=\'TB not focused\'">'+rem_str+'</TEXTAREA>';
  //...
  html += '</body></html>';
 
  popupWin.document.write(html);
  popupWin.document.close();
  setTimeout(setPopupOnTop, 500);
}
 
function setPopupOnTop()
{
  if (popupWin != undefined)
    try {
      if (popupWin.status == 'TB not focused' || popupWin.status == 'BODY not focused')
      {
        popupWin.focus();
      }
      setTimeout(setPopupOnTop, 500);
    } catch (e) {
      popupWin = undefined;
    }
}

Open in new window

0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
1) Modal window means that you cant minimize creating window without minimise modal one - this is how it works at least in windows. So DIV solution match perfectly your problem. DIV solution will also work on all browsers, not just on crapy IE. Code I see in what you paste should be simple convertable to DIV solution. Eventually there might be some javascrip incossistients in <script> tag because maybe it refers inside to  actual document. But whole tag will also be executed so no worries.

2) have you tried showModalDialog ?  If it not work for your solution, then I have to say that only DIV will be ok here :( I really advice you do this DIV version - its cleaner, make use good maners in web design, faster user content display (creating new window in IE can be slow on slower machines)

0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Well your solution is just a trick to make it what you need. DIV doesnt use that trick. But I understand that you dont want to use DIV solution so just do like you fell :))))
0
 
tuchfeldAuthor Commented:
Hi wilg32.
I want to thank you for your treatment but for now I will accept my own solution.
BTW
1) again does your "DIV solution" behaves like mine? i.e.: when I minimize the "creator window" the "new on top window" will appear independantly?
2) what is "crapy IE"?
Thanks, Aryeh.
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
1) when you minimize creator window, in modal one you also need to minimise this created one. In fact proper modal window block "minimise" status, but this cant be done in web. Full spec for modal window is herE:

http://en.wikipedia.org/wiki/Modal_window

2) IE - internet explorer, doing application only for internet explorer is against web standard that says that visitor can use browser that he like. Internet explorer also does not support many of web standards and when we (developers) trying to create something for all browsers we almost always need to create diffrent code for explorer (because all rest browsers mostly follow standards and display things almost the same way). If you spend alot of time creating lot of pages you will get what I mean i future :)
0
 
tuchfeldAuthor Commented:
1) Can your DIV-Modal window be outside=beside the creator window?
2) I develop only for IE. this is my attitude. so I request the users to use only IE. one of the significant reasons is that I use a huge and complex Doc file converted to Html. and another reason is that I do not want to use "IF" conditions for each browser type. and another reason is that my development time is limited and precious. the "goal" is what important... yes, I'm not afraid to say that I'm Microsoft fan after all it is them who we are using the OS and Office etc.
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
1) No its in the same window, but behaviour is the same - you wont see what is in background until you close modal DIV window - thats the whole idea of modal window
2) I wont argue with what you need - it just against standards but of course If you dont have resources or you have other reason do what you feel. In fact you dont have to follow standards if it is created for small group of recipients
0
 
tuchfeldAuthor Commented:
1) In my solution I might need to move my "WindowOpenOnTop" outside of the creator window in order to "fully" see the creator window context. If the "ModalDivWindow" has to be inside, I loose this ability. Right?
2) So. I see we "agree"...
3) Still, I feel that I should award you for the effort and the explanations. How can I do so?
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
1) Yes you would lose that. If you need that functionality then your solution is ok here :)
2) ;)
3) never mind
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 9
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now