Pop-up Text Box

[DOOL]

I am sorry for asking what I am sure is a total newbie question but to be honest, I am a total newbie! I have however spent 2 days searching the net and forums trying to find the answer before I posted here so please do not think I am trying to be lazy, i just cant seem to find it and am at my wits end.

 

What i am trying to do here is make a simple link that is one sentence long, that will open up a small pop-up box that will give a one paragraph explanation.

 

So here are the details.

I created an infobox on the left column with 4 sentences. Each one of those is a link to open a different page ( i used a copy of the shipping page to set these up)

So now for example if you click on the first link in the infobox "FAQ" it brings up a page that has a list of FAQ's such as:

How to charge your battery.

When does the battery need recharged.

What to do if the light does not turn on.

etc.................

 

Now what I want to do is make is so if a customer clicks on the sentence "How to charge your battery"

Then it will open a small pop-up box in the middle of the screen that has a single paragraph of text that tells the customer exactly what to do.

Then when they click on the pop-up or anywhere on the screen it closes the pop-up.

 

 

I am sure this is a very simple operation but I truly have no idea how to go about it.

If someone could please share a list of instructions on how i would go about this it would be greatly appreciated.

Thank You In Advance!!!!

[germ]

I am sorry for asking what I am sure is a total newbie question but to be honest, I am a total newbie! I have however spent 2 days searching the net and forums trying to find the answer before I posted here so please do not think I am trying to be lazy, i just cant seem to find it and am at my wits end.

 

What i am trying to do here is make a simple link that is one sentence long, that will open up a small pop-up box that will give a one paragraph explanation.

 

So here are the details.

I created an infobox on the left column with 4 sentences. Each one of those is a link to open a different page ( i used a copy of the shipping page to set these up)

So now for example if you click on the first link in the infobox "FAQ" it brings up a page that has a list of FAQ's such as:

How to charge your battery.

When does the battery need recharged.

What to do if the light does not turn on.

etc.................

 

Now what I want to do is make is so if a customer clicks on the sentence "How to charge your battery"

Then it will open a small pop-up box in the middle of the screen that has a single paragraph of text that tells the customer exactly what to do.

Then when they click on the pop-up or anywhere on the screen it closes the pop-up.

 

 

I am sure this is a very simple operation but I truly have no idea how to go about it.

If someone could please share a list of instructions on how i would go about this it would be greatly appreciated.

Thank You In Advance!!!!

Type the words window.open javascript into your favorite search engine and the world is your oyster...

:)

[DOOL]

Type the words window.open javascript into your favorite search engine and the world is your oyster...

:)

 

Germ thanks for such a fast reply.

However i seem to either be miscommunicating or doign something wrong.

I have read several pages and tested them using this function but each one seems to do the same thing wich is to open a new browser window. The trick here is i dont want the main window to change at all but simply open a popup box over the top of the current page.

So when someones clicks on a link such as

"How to tell if my battery is charged"

Then a popup box opens on top of the current page, just like clicking the product thumbnail to enlarge the product picture. Inside that box would be a brief paragraph and then if they click on that box or even on the page behind it, then it would close the popup and they would be right back to where they were before they clicked the link.

[germ]

Are you testing with Internet Explorer or Firefox?

:unsure:

 

My guess would be Firefox.

 

If so, try the tests again with Internet Explorer.

 

There is an example of this in osC in /catalog/advanced_search.php

 

            <td class="smallText"><?php echo '<a href="javascript:popupWindow(\'' . tep_href_link(FILENAME_POPUP_SEARCH_HELP) . '\')">' . TEXT_SEARCH_HELP_LINK . '</a>'; ?></td>

(the popup search help)

[NodsDorf]

You could also achieve this with a rollover display with Javascript.

 

I had to do it on a form I created and it seemed to work nicely.

 

http://www.rubberstore.com/catalog/made-print-c-65.html

Scroll down to where it says Products and hover over the first ?

 

You could put that box anywhere, and it's also a link so if they click it, in your case it would take them to the long description.

 

The popup is actually an image that is getting displayed, you see this alot with forums and blogs who underline certain keywords then put a little bubble popup when you hover over the text. I didn't write the code I found it pretty easy with a search.

[DOOL]

I am actualy using IE8. Well I think I'm getting closer with your guidence. I have read more pages on window.open then I can count and so many show the snippets but not exactly how they would fit into the page so that made it very tough. One I could decifer that made a bit of sense gave me the following code wich i inputed my file names, but i keep getting "error on page" when i click the link. Below is the entire code.

Also test1.html, test2.html & test3.html are all in the catalog folder.

 

One other question with this, is i was thiking of making these buttons instead of just plain text links.

 

Thank you for all your help and patience!!!

 

<?php
/*
 $Id: shipping.php 1739 2007-12-20 00:52:16Z hpdl $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2002 osCommerce

 Released under the GNU General Public License
*/


define('NAVBAR_TITLE', 'Beginners Guide to Vaping');
define('HEADING_TITLE', 'Beginners Guide to Vaping');

define('TEXT_INFORMATION', '
<head>
<script language="JavaScript">
<!-- 
function open1() {
var open1 =
window.open("test.html","scrollbars=yes,height=600,width=800,resizable=yes");
}
function open2() {
var open2 =
window.open("test2.html","scrollbars=yes,height=600,width=800,resizable=yes");
}
function open3() {
var open3 =
window.open("test3.html","scrollbars=yes,height=600,width=800,resizable=yes");
}
// -->
</SCRIPT> 

</head>
<body>


<br><A href="javascript:open1()">Open 1</A>
<br><A href="javascript:open2()">Open 2</A>
<br><A href="javascript:open3()">Open 3</A>


</body>
');
?>

[germ]

<?php
/*
 $Id: shipping.php 1739 2007-12-20 00:52:16Z hpdl $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2002 osCommerce

 Released under the GNU General Public License
*/


define('NAVBAR_TITLE', 'Beginners Guide to Vaping');
define('HEADING_TITLE', 'Beginners Guide to Vaping');

define('TEXT_INFORMATION', '
<head>
<script language="JavaScript">
<!-- 
function open1() {
var open1 =
window.open("test.html","window1","scrollbars=yes,height=600,width=800,resizable=yes");
}
function open2() {
var open2 =
window.open("test2.html","window2","scrollbars=yes,height=600,width=800,resizable=yes");
}
function open3() {
var open3 =
window.open("test3.html","window3","scrollbars=yes,height=600,width=800,resizable=yes");
}
// -->
</SCRIPT> 

</head>
<body>


<br><A href="javascript:open1()">Open 1</A>
<br><A href="javascript:open2()">Open 2</A>
<br><A href="javascript:open3()">Open 3</A>


</body>
');
?>

Try the code above.

 

You missed an agument in the window.open command (the window name).

[DOOL]

<?php
/*
 $Id: shipping.php 1739 2007-12-20 00:52:16Z hpdl $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2002 osCommerce

 Released under the GNU General Public License
*/


define('NAVBAR_TITLE', 'Beginners Guide to Vaping');
define('HEADING_TITLE', 'Beginners Guide to Vaping');

define('TEXT_INFORMATION', '
<head>
<script language="JavaScript">
<!-- 
function open1() {
var open1 =
window.open("test.html","window1","scrollbars=yes,height=600,width=800,resizable=yes");
}
function open2() {
var open2 =
window.open("test2.html","window2","scrollbars=yes,height=600,width=800,resizable=yes");
}
function open3() {
var open3 =
window.open("test3.html","window3","scrollbars=yes,height=600,width=800,resizable=yes");
}
// -->
</SCRIPT> 

</head>
<body>


<br><A href="javascript:open1()">Open 1</A>
<br><A href="javascript:open2()">Open 2</A>
<br><A href="javascript:open3()">Open 3</A>


</body>
');
?>

Try the code above.

 

You missed an agument in the window.open command (the window name).

 

 

(w00t) THAT WORKED AWESOME!!!! (w00t)

Thank you for all your assistance!!!!!