Solved

popup window in java script

Posted on 2001-09-03
19
717 Views
Last Modified: 2007-11-27
Hi,

I am a begginer in javascript and I must create a popup window using javascript. This must have title bar with close image and an iFrame to show the content of the url. I have a js file with a method:
showPopupWindow(url, top, left, width, heght) wich will be called from an html page

My problems are:

1. How can I assign a click event to the close gif to close this popup window?

2. How can put an iFrame on this popup window to see the content of the url?

This script must work only on IE 5 +
0
Comment
Question by:f_levente
  • 12
  • 3
  • 2
  • +2
19 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6450502
Like this?

<body onLoad="
window.myIframe.document.body.innerHTML='<x'+'mp>'+window.document.body.outerHTML+'</x'+'mp>';
">
<iframe id="myIframe" src="about:blank"></iframe>


</body>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6450505
<a href="#"
onCLick="window.close(); return false"><img
src="close.gif" border="0"></a>

Michel
0
 
LVL 1

Expert Comment

by:Agatheeswaran
ID: 6450572
What i understood from your Question is that,
On click of a button you what to popup a window,
and in the new window you should have one close gif i.e image and iframe displaying the content. right!

If so, try with this code, are get back to me if you have problem.

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>Generating a New window</TITLE>
<script language="javascript">
     function fnNewWindowGen(){
          var newwin
          newwin = ""
          newwin = window.open("test.html","newwindow")
          newwin.document.write("<HTML><HEAD><TITLE>Popup Window</TITLE></HEAD><body>" + "\n")
          newwin.document.write("<form name='frmpopup'>" + "\n")
          newwin.document.write("<a href=# onClick ='Javascript:window.close();return false;'><img src='close.gif'></a>")
          newwin.document.write("<iframe src='http://www.mail.yahoo.com'></iframe>")
          newwin.document.write("</form></body></html>")
     }
</script>
</HEAD>
<BODY>
<form name="frmtest">
     <input type="button" name="NewWindow" value="NewWindow" onClick="fnNewWindowGen();">
</form>
</BODY>
</HTML>

if you are not satisfied with this code, please get back to me.
bfn
cheers.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6450717
Agatheeswaran: Please do not answer questions that have comments. Especially not when you are not sure that IS the answer. Please read the bottom of this page

If you see the question, the function is called
showPopupWindow(url, top, left, width, heght)

so at least include that in your script.

Also your script will not work well since you do not close the document after writing

function showPopupWindow(url, top, left, width, heght)
   var newwin
newwin = window.open("","newwindow",
'width='+width+
',height='+height+
',top='+top+
',left='+left)
   newwin.document.write('<HTML><HEAD><TIT'+'LE>Popup Window</TIT'+'LE></HEAD><bo'+'dy>\n')
   newwin.document.write('<iframe src='+url+'></iframe>')
   newwin.document.write('<a href="#" onClick ="window.close();return false;"><img src="close.gif" border="0"></a>")
   newwin.document.write('</bo'+'dy></html>')
   newwin.document.write('</body></html>')
   newwin.document.close();
}



Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6450720
sorry - left some debris in there
var newwin
newwin = window.open("","newwindow",

should be
var newwin = window.open("","newwindow",

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6450722
and
, width, heght)

should be

, width, height)

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6450747
ahh - more debris

Here is a complete script

<script>
function showPopupWindow(url, top, left, width, height) {
  top=(top)?top:0;
  left=(left)?left:0;
  width=(width)?width:400;
  height=(height)?height:500;  
  var newwin = window.open("","newwindow",
'width='+width+
',height='+height+
',top='+top+
',left='+left)
  newwin.document.write('<HTML><HEAD><TIT'+'LE>Popup Window</TIT'+'LE></HEAD><bo'+'dy>\n')
  newwin.document.write('<iframe width='+(width-10) +' height='+(height-50)+' src='+url+'></iframe>')
  newwin.document.write('<br><center><a href="#" onClick ="window.close();return false;">')
  newwin.document.write('<img src="close.gif" border="0"></a></center>')
  newwin.document.write('</bo'+'dy></html>')
  newwin.document.write('</body></html>')
  newwin.document.close();
}
</script>  
</head>

<body>
<a href="http://irt.org/"
onClick="showPopupWindow(this.href); return false">irt</a>
<a href="http://www.experts-exchange.com/"
onClick="showPopupWindow(this.href,100,100,800,600); return false">ee</a>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6450751
Feel free to accept or reject any proposed answer and accept a comment as answer.

Michel
0
 

Author Comment

by:f_levente
ID: 6450811
OK guys,

Here is more specifications: I can not use the window.open. This was my first choice, but for some reasons I can not use it. So, here is my code from the page.js:

function showDialogWindow(url,top,left,width,height){
     if (!url) return;

     this.dialogWindow = document.createElement("DIV");
     document.body.appendChild(this.dialogWindow);

     this.dialogWindow.style.position = "absolute";
     this.dialogWindow.style.width = width;
     this.dialogWindow.style.height = height;

     this.dialogWindow.style.pixelTop = top;
     this.dialogWindow.style.pixelLeft = left;

     
     //the close button
     this.closeButtonDiv = document.createElement("DIV");
     this.dialogWindow.appendChild(this.closeButtonDiv);
     
     this.closeButtonDiv.style.position = "absolute";
     this.closeButtonDiv.style.pixelTop = 0;
     this.closeButtonDiv.style.pixelLeft = parseInt(this.dialogWindow.style.width) - 20;
     this.closeButtonDiv.style.cursor = "hand";
     
     var closeimg = new Image(); // for the inactive image
       closeimg.src = "../gfx/close.gif";
       this.closeButtonDiv.appendChild(closeimg);
     
        //the code that should be close this "window"

.............

}

so, this code is called from different html pages in this manner: <SPAN style="cursor:hand" onClick="activeObjects[PAGE_ID].showListDialog('page_641_642.xml', '100', '100', '272', '250');" .....>

Sorry if I was not clear for the first time.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6450835
What a horrible waste of my time :(

Next time DO specify your question better - and also PLEASE tell us the reasons you cannot use window.open!!!

Also showListDialog
is not
showDialogWindow

and what DO you use to popup - looks like you create a DIV

If so, show and hide it

Michel
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 300 total points
ID: 6450858
Or do this:

<script>
blank='';
function makeLink(url,h,w) {
txt = '<iframe height='+h+' width='+w+' src="'+url+'"></iframe>'+
'<a href=# onClick="window.document.all.iframediv.innerHTML=blank; return false">Close</a>';
return txt
}
</script>  
</head>

<body>

<div id="iframediv"></div>
<a href="http://irt.org/"
onClick="document.all.iframediv.innerHTML=makeLink(this.href,400,500); return false">irt</a>


</body>
0
 

Author Comment

by:f_levente
ID: 6450897
OK guys,

Here is more specifications: I can not use the window.open. This was my first choice, but for some reasons I can not use it. So, here is my code from the page.js:

function showDialogWindow(url,top,left,width,height){
     if (!url) return;

     this.dialogWindow = document.createElement("DIV");
     document.body.appendChild(this.dialogWindow);

     this.dialogWindow.style.position = "absolute";
     this.dialogWindow.style.width = width;
     this.dialogWindow.style.height = height;

     this.dialogWindow.style.pixelTop = top;
     this.dialogWindow.style.pixelLeft = left;

     
     //the close button
     this.closeButtonDiv = document.createElement("DIV");
     this.dialogWindow.appendChild(this.closeButtonDiv);
     
     this.closeButtonDiv.style.position = "absolute";
     this.closeButtonDiv.style.pixelTop = 0;
     this.closeButtonDiv.style.pixelLeft = parseInt(this.dialogWindow.style.width) - 20;
     this.closeButtonDiv.style.cursor = "hand";
     
     var closeimg = new Image(); // for the inactive image
       closeimg.src = "../gfx/close.gif";
       this.closeButtonDiv.appendChild(closeimg);
     
        //the code that should be close this "window"

.............

}

so, this code is called from different html pages in this manner: <SPAN style="cursor:hand" onClick="activeObjects[PAGE_ID].showListDialog('page_641_642.xml', '100', '100', '272', '250');" .....>

Sorry if I was not clear for the first time.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6451423
Please click the link at the top: "reload question" instead of using the browser reload.

Michel
0
 
LVL 1

Expert Comment

by:Moondancer
ID: 6727998
This question is LOCKED with a Proposed Answer.  If it helps you, great, accept it and grade it to close.  If not, reject it and comment as to why or what else is needed.

Few additional experts will join this collaboration effort, once a question has been locked.  Just want to confirm this to you.  If more than one expert helps you, you can always split points or award additional help in a new question, within the same topic area.  If you need help from us, post a zero point question here, and include the link:

http://www.experts-exchange.com/jsp/qList.jsp?ta=commspt

Moondancer
Community Support Moderator @ Experts Exchange

P.S.  Double click your Member Profile, expand VIEW HISTORY to navigate and update all your open questions please.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6728699
Please do NOT accept the proposed answer.

Michel
0
 
LVL 1

Expert Comment

by:Moondancer
ID: 6740145
Asker logged on 1/12/02, but did not take next action.  Recommendations please, since it looks like I'll need to finalize this.

Thanks,

Moondancer
Community Support Moderator @ Experts Exchange
0
 
LVL 12

Expert Comment

by:ahosang
ID: 7962535
This question has been abandoned. I will make a recommendation to the moderators on its resolution in a week or two. I appreciate any comments that would help me to make a recommendation.
 
In the absence of responses, I may recommend DELETE unless it is clear to me that it has value as a PAQ. Silence = you don't care
 
ahosang
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 7964726
I don't care... I should get points for effort...
0
 

Author Comment

by:f_levente
ID: 7965346
I apologize that I left over this question for almost two years. But at that time the proposed solutions was not acceptable from my boss point of view. He has this special request to not use the window.open. After a time, the solution implemented was that one described by mplungjan where the iframe was created in the HTML body (and not dynamically from JavaScript) and we do only show and hide at this. So, the points it’s going to mplungjan.

Again, sorry for this long time.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now