Simple javascript pop-up

[Copernic Reporter]

Any idea how to make an javascript popup? I already added the code from below but whenever I click the links it opens the same page (demo.html):

  Quote

<script type="text/javascript">

function popup(){

cuteLittleWindow = window.open("demo.htmlittleWindow", "location=no,width=614,height=222");

}</script>

<center>

<font face="Verdana"><font size="-1"><b><a href="http://www.mywebsite.com/"><font color="#000000">Home Page</font></a> | <a href="javascript:popup()">Demo</a> | <a href="javascript:popup()">Contact</a></b></font></font>

</center>

..and it looks like this:

What I'm doing wrong? Cause I know it's pretty simple but I'm not good a html. Thanks.

[Tuishimi]

Have you used your browser's debugger to see if any script errors are being flagged?

[Tuishimi]

Well, it works for me in Chrome, Firefox and IE 10. Normally I would say when you use the "javascript:xxx()" form in an href, to terminate it with a semi-colon ("javascript:xxxxx();")... but rules aren't very strict anymore and that seems to work in recent browsers. Is the window opening behind your browser? Do you have popups disabled or some other security setting enabled?

[Copernic Reporter]

Yes, there are no errors and there's not any other Javascript code apart from that. It's a pretty simple page, nothing complex.

The window opens as it should in the front. Maybe I didn't explained well the problem. The script is working but what doesn't work is this:

1. I have 3 menus: HOME | DEMO | CONTACT (so 3 pages) INDEX.html - DEMO.html and CONTACT.html

2. The javascript resides on the INDEX.html

3. If I click on DEMO it opens the DEMO.html as it should in the front of my browser.

4. But if I click on CONTACT it opens the same DEMO.html and not CONTACT.html

[spacer]

I'm not really sure what you're asking, but if you want your links to open a new window, the "name" parameter needs to be: name="_blank". The value "littleWindow" will always point to the same window with every click. "_blank" will spawn a new window/tab with every click.

[Seahorsepip Veteran]

The mistake is in the popup function since demo.html is hard coded instead of a variable...

[Tuishimi]

  On 18/11/2012 at 21:39, Copernic said:

Yes, there are no errors and there's not any other Javascript code apart from that. It's a pretty simple page, nothing complex.

The window opens as it should in the front. Maybe I didn't explained well the problem. The script is working but what doesn't work is this:

1. I have 3 menus: HOME | DEMO | CONTACT (so 3 pages) INDEX.html - DEMO.html and CONTACT.html

2. The javascript resides on the INDEX.html

3. If I click on DEMO it opens the DEMO.html as it should in the front of my browser.

4. But if I click on CONTACT it opens the same DEMO.html and not CONTACT.html

Ohhhhhhh! :) Yes, I very much misunderstood your question/problem. Use target="_blank", pass the page name as a parameter or use a separate javascript function, and also NAME the window dynamically in the open function.

[Copernic Reporter]

Thank you very much, I finally got it working!

[Tuishimi]

This was my little version to test yours...

  Quote

<script type="text/javascript">

var aPage = new Array();

var aHandle = new Array();

aPage[0] = "somepage.html";

aPage[1] = "someotherpage.html";

aHandle[0] = null;

aHandle[1] = null;

function popupbyidx(idx) {

var prefix = "winname_";

aHandle[idx] = window.open(aPage[idx], prefix + idx, "location=no,width=614,height=222");

}

function closebyidx(idx) {

aHandle[idx].close();

}

function popup(page){

cuteLittleWindow = window.open("demo.htmlittleWindow", "location=no,width=614,height=222");

}</script>

<center>

<font face="Verdana"><font size="-1"><b><a href="http://www.mywebsite.com/"><font color="#000000">Home Page</font></a> | <a href="javascript:popupbyidx(0);">Demo</a> | <a href="javascript:popupbyidx(1);">Contact</a></b></font></font>

</center>

<center>

<font face="Verdana"><font size="-1"><b><a href="http://www.mywebsite.com/"><font color="#000000">Home Page</font></a> | <a href="javascript:closebyidx(0)">Close Demo</a> | <a href="javascript:closebyidx(0)">Close Contact</a></b></font></font>

</center>