Opening a webpage as a popup

I'm trying to make a single webpage behave as a popup annoucement - so that visitors can store the URL as a favourite and when they click on it all they see is a small popup window with today's annoucement (rather than see a full new browser window).

I've googled some javascript that uses window.open but this requires two pages .. a first blank page that contains the javascript and a <body onLoad> command that triggers the popup. This works fine, except when you close the popup, the blank page is still behind as a full window that also needs to be closed.

So I guess I'm either after a way of achieving this on a single page, or a command that closes the first page when the popup is closed.
pauldownhamAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
try : setTimeout("self.close()", 1000);
0
leakim971PluritechnicianCommented:
better : setTimeout(function() { self.close(); }, 2000);
0
Dr. KlahnPrincipal Software EngineerCommented:
Technically, this is feasible.  Practically, it may not be a useful idea.  Visitors using IE will see IE's annoying whine about having blocked a popup.  Firefox users probably will never even see the popup.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

CSIPComputingCommented:
You could do this with a very small VB2010 app, which contained the Webbrowser control linked to that URL.

You'd have full control over what is displayed, size etc, and no additional windows etc.

It'd probably take you longer to Download VB Express 2010 than to create the app!
0
pauldownhamAuthor Commented:
Hi, thanks, I tried that ... and what happens now is that an IE message pops up saying "the webpage you are viewing is trying to close the window" and needs a YES to clear! Clicking on YES works (ie. the announcement page is all that's left), but obviously this is no better than what I had. Cheers, Paul
0
pauldownhamAuthor Commented:
DrKlahn: I think all my users are on IE, and they can choose the "always allow from this website" option after the first go - so I'm not too worried about that aspect.

CSIP: I'm not a VB user, but can see that this is free download from MS ... so what would be involved in creating an app - loads of learning or fairly obvious?

Overall, I suppose I just expected there would be an easy way of bunging a close command on the existing page - as Leakim is trying?
0
leakim971PluritechnicianCommented:
javascript don't allow to bypass some security concept. here you're trying to bypass some popup security mechanism set in place to protect privacy and user freedom
0
CSIPComputingCommented:
The app would be straight forward to create, as it's a single dialog, with one control, and a couple of settings.

No massive learning curve, no code, drag n drop and then test and compile.

Depends how brave you're feeling.
0
jjperezaguinagaCommented:
Greetings pauldownham,

If you don't care about the modal of the popup, you can always load a Lightbox with an Iframe on it. For instance, check the example of .load() from Jquery:

http://api.jquery.com/load/

They have an iframe where they load some specific content from an external webpage (actually, jquery). Pop ups sometimes are seen as old-school, bad web programming practice for the reasons posted before by other experts. Pop ups behave differently according the browser.

I recomend using a dialog instead. Please refer to the following fiddle for an example: http://jsfiddle.net/xHeAj/

Best regards,
-JJ
0
pauldownhamAuthor Commented:

jjperezaguinaga, many thanks - this looks very promising, but I'm probably being too thick to make it work!

Two things:
(1) In the example (copy below), I presume that I need to replace the ../../ with actual addresses, but what would these be?
(2) In the example you end up with a link ("show the dialog")  that has to be clicked on to make the google window appear, how would I change the code to make this happen immediately?

Thanks


<!DOCTYPE html><html><head>

    <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />

    <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
    <script type="text/javascript" src="../../ui/ui.dialog.js"></script>

  <script type="text/javascript">
function showDialog(){
   $("#divId").dialog("open");
   $("#modalIframeId").attr("src","http://www.google.com");
   return false;
}

$(document).ready(function() {
   $("#divId").dialog({
           autoOpen: false,
           modal: true,
           height: 100,
           width: 200
       });
});
  </script>
</head>
<body >

<a href="" onclick="return showDialog()">Show the Dialog</a>

<div id="divId" title="Dialog Title">
    <iframe id="modalIframeId" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title">Your browser does not suppr</iframe>
</div>

</body>
</html>
0
jjperezaguinagaCommented:
Ah, my bad. Let me put the hosted API from Google. Copy and paste this in a index.html file and it should work :)

<!DOCTYPE html><html><head>

	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

  <script type="text/javascript">
function showDialog(){
   $("#divId").dialog("open");
   $("#modalIframeId").attr("src","http://www.google.com");
   return false;
}

$(document).ready(function() {
   $("#divId").dialog({
           autoOpen: false,
           modal: true,
           height: 600,
           width: 900
       });
});
  </script>
</head>
<body >

<a href="" onclick="return showDialog()">Show the Dialog</a>

<div id="divId" title="Dialog Title">
    <iframe id="modalIframeId" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title">Your browser does not suppr</iframe>
</div>

</body>
</html>

Open in new window


Hope it helps.
Best regards,
-JJ
0
pauldownhamAuthor Commented:
Hi jjperezaguinaga,

Thanks - but this still doesn't work as a popup - it opens a full browser window first with "Show the Dialog", that then opens the Google panel in the Iframe when clicked on (so no better than how it was!).

How can the script be changed to open the Google panel only?

Thanks
0
jjperezaguinagaCommented:
Ah, my apologies.

Here's the fiddle: http://jsfiddle.net/Sun8D/
Or in case you rather have all together, here's the code:

<!DOCTYPE html><html><head>

	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

  <script type="text/javascript">

$(document).ready(function() {
   $("#divId").dialog({
           autoOpen: false,
           modal: false,
           height: 600,
           width: 900
       });
	   
	$("#divId").dialog("open");
	$("#modalIframeId").attr("src","http://www.google.com");
});
  </script>
</head>
<body >

<div id="divId" title="Dialog Title">
    <iframe id="modalIframeId" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title">Your browser does not suppr</iframe>
</div>

</body>
</html>

Open in new window


As you can see, I give the dialog the attribute of modal: false, so it can behave more like a pop-up. If you want multiple pop-ups, you can use a class instead of an id the divId, and just copy and paste the html; the javascript is the same.

Best regards,
-JJ
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
pauldownhamAuthor Commented:
many thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Windows XP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.