asked on

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.

leakim971

try : setTimeout("self.close()", 1000);

leakim971

better : setTimeout(function() { self.close(); }, 2000);

Dr. Klahn

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.

Ian Pattison

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!

pauldownham

ASKER

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

pauldownham

ASKER

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?

leakim971

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

Ian Pattison

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.

jjperezaguinaga

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

pauldownham

ASKER

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>

jjperezaguinaga

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

pauldownham

ASKER

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

ASKER CERTIFIED SOLUTION

jjperezaguinaga

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pauldownham

ASKER

many thanks!