with a jQuery plugin we can create a dialog box that looks the same in all browsers and can certainly be customized according to our taste through css file. The name of the plugin is jQuery Alert, its file size is only 7kb. Examples of its use, as below :
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("a#alert_button").click( function() {
jAlert('Displays alert dialog box containing warning.', 'Alert Dialog Box');
});
$("a#confirm_button").click( function() {
jConfirm('Do you want to delete this data?', 'Confirmation Dialog Box', function(r) {
if( r ) jAlert('Data successfully deleted', 'Confirmation Dialog Box Results | True')
else jAlert('The data is not deleted.', 'Confirmation Dialog Box Results | False');
});
});
$("a#prompt_button").click( function() {
jPrompt('Type a word in the textbox below :', 'Enter a word....', 'Prompt Dialog Box', function(r) {
if( r ) jAlert('The word you entered : ' + r + '', 'Dialog Box Results');
});
});
});
</script>
It's just a function to call its jQuery Alert plugin only, and to call it via a link, can use html syntax as below :
<p><a href="#" id="alert_button">Alert Dialog</a></p>
<br />
<p><a href="#" id="confirm_button">Confirm Dialog</a></p>
<br />
<p><a href="#" id="prompt_button">Prompt Dialog</a> </p>
</div>
the result is like this :
if the alert box is clicked it will display a dialog box like this
if the confirm box is in click it will display a dialog box like this
And last stage, if the Prompt box is clicked it will display a dialog box like this
Hopefully this article can help all programmer friends. Thank you for reading this article.