Solved

Opening a webpage as a popup

Posted on 2011-09-16
14
393 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:pauldownham
  • 5
  • 3
  • 3
  • +2
14 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36548506
try : setTimeout("self.close()", 1000);
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36548508
better : setTimeout(function() { self.close(); }, 2000);
0
 
LVL 23

Expert Comment

by:Dr. Klahn
ID: 36548573
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
 
LVL 10

Expert Comment

by:CSIPComputing
ID: 36548587
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
 

Author Comment

by:pauldownham
ID: 36548594
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
 

Author Comment

by:pauldownham
ID: 36548756
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36548774
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 10

Expert Comment

by:CSIPComputing
ID: 36548819
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
 
LVL 6

Expert Comment

by:jjperezaguinaga
ID: 36556617
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
 

Author Comment

by:pauldownham
ID: 36558987

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
 
LVL 6

Expert Comment

by:jjperezaguinaga
ID: 36560129
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
 

Author Comment

by:pauldownham
ID: 36565592
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
 
LVL 6

Accepted Solution

by:
jjperezaguinaga earned 500 total points
ID: 36567023
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
 

Author Closing Comment

by:pauldownham
ID: 36567847
many thanks!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

747 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

12 Experts available now in Live!

Get 1:1 Help Now