Jump to content



Photo

Simple javascript pop-up


  • Please log in to reply
8 replies to this topic

#1 Copernic

Copernic

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 03-September 04

Posted 18 November 2012 - 21:30

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):


<script type="text/javascript">
function popup(){
cuteLittleWindow = window.open("demo.html", "littleWindow", "location=no,width=614,height=222");
}</script>



<center>
<font face="Verdana"><font size="-1"><b><a href="http://www.mywebsite...ite.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:

Posted Image

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


#2 Tuishimi

Tuishimi

    Michinator

  • Joined: 19-November 10
  • OS: Windows 8

Posted 18 November 2012 - 21:34

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

#3 Tuishimi

Tuishimi

    Michinator

  • Joined: 19-November 10
  • OS: Windows 8

Posted 18 November 2012 - 21:39

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?

#4 OP Copernic

Copernic

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 03-September 04

Posted 18 November 2012 - 21:39

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

#5 spacer

spacer

    I'm awesome

  • Joined: 09-November 06
  • Location: Connecticut, USA
  • OS: Windows 7
  • Phone: Nexus 4

Posted 18 November 2012 - 21:41

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.

#6 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 17
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 18 November 2012 - 21:55

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

#7 Tuishimi

Tuishimi

    Michinator

  • Joined: 19-November 10
  • OS: Windows 8

Posted 18 November 2012 - 21:59

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.

#8 OP Copernic

Copernic

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 03-September 04

Posted 18 November 2012 - 22:00

Thank you very much, I finally got it working!

#9 Tuishimi

Tuishimi

    Michinator

  • Joined: 19-November 10
  • OS: Windows 8

Posted 18 November 2012 - 22:11

This was my little version to test yours...

<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.html", "littleWindow", "location=no,width=614,height=222");
}</script>

<center>
<font face="Verdana"><font size="-1"><b><a href="http://www.mywebsite...ite.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...ite.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>