extensions development for Joomla!™

 

Beautify those javascript alerts

One of the most annoying things users experience is when submitting any kind of form on a website, before they complete the required fields with correct data, is getting those alert "pop-ups" generated by JavaScript. Well, there's always a way to overcome this without messing up with the original javascript code that triggers it (ex. formvalidation.js).

Using just a simple jQuery instruction will do the trick to disable the alert() and replace it with a nice user-friendly message in the page.

First you need to have the jQuery script (jquery.js or jquery-min.js) loaded (which in main frameworks it is by default) and then follow the example and adjust to your needs and taste.

This is just a very basic example and you can always enhance it, but the window.alert part is where the jQuery rules over the JavaScript native alert() popup.

<!-- The simple jQuery code starts here -->
<script type="text/javascript">
    (function($) {
		$(document).ready(function() {
			this.alert = function() {
				$("#myalert").html("Your alert message goes here").fadeToggle("slow");
			};
		} );
	}(jQuery));
</script>
<!-- The simple jQuery code ends here -->
<!-- The place where you want to show the alert message starts here -->
<h4 id="myalert" style="color: orange"></h4>
<!-- The place where you want to show the alert message ends here -->

click to highlight the text

Hope it helps

Shopping cart

The cart is empty

Login

Extension added to cart! x
Back to Top