Replacement for Javascript alert on click

Hey all.

I have a web shop.
When someone clicks "add to basket" a javascript alert pops up to say "1 has been added to your basket".

How can i change this so that it perhaps uses a layer or css or something to make a better looking "alert". That way I can style it to suit the site, add extra links and options etc.

In summary, can DHTML, or CSS or something be used in place of the alert box, if so, how?

Any help would be amazing!

Thanks,
David

 

Hum, you can do something like this:

Add a empty div element under the basket or any place you want, and style it accordingly to your site look. Then instead of alert you can add some text dinamicaly using innerHTML.

If your element looks something like this:

<div class="message" id="message"></div>

Code (markup):

you can use this function:

function showMessage(msg) {
   document.getElementById('message').innerHTML = msg;
   window.setTimeout(function() {
       document.getElementById('message').innerHTML = '';
   }, 2000);
}

Code (markup):

Then, instead of alert("1 has been added to your basket""); use showMessage("1 has been added to your basket");

Alternatively, you can fully replace the alert function:

window.alert = function(msg) {
   document.getElementById('message').innerHTML = msg;
   window.setTimeout(function() {
       document.getElementById('message').innerHTML = '';
   }, 2000);
}

Code (markup):

Then, you don't need to change anything more in the code.

 

Thank you, I am almost there now but I am having an issue with printing my javascript inside a php echo command.

Any ideas on what I can do to get this working? I am getting confused with escaping stuff etc I think? Specifically the ONCLICK event is the issue.

<div class="products_buynow">
<?php if($products[$product_counter]['products_quantity'] > 0){
	echo '<a onclick="displayStaticMessage('<h1>Static message</h1>
	<p>This is a static message</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Close</a>',false);return true"
	target="iframe" href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $products[$product_counter]['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT, 'class="listingBuyNowButton"') . '</a>';
}
else{
	echo zen_image_button(BUTTON_IMAGE_SOLD_OUT_SMALL, BUTTON_SOLD_OUT_ALT, 'class="listingBuyNowButton"');

} ?>
</div>
</td>

Code (markup):

 

your problem is that you're using single quotes inside single quotes without escaping them. In php you cand define strings like this:

$s = <<<SOMETHING
   put content here
whatever you feel like

SOMETHING;

Code (markup):

Instead of SOMETHING you can call it wathever you want, but the opening and closing statements must match. Also, add a newline after the closing statement and before the next statements. You can use variable identifiers inside the string that re then replaced by their values.

Just one small observation, in your original code you call $_GET['main_page'], it will be better if you assign that value to a non array variable, like $mainPage = $_GET['main_page'], and then use $mainPage inside the string.

Hope it helps...