{"id":1093,"date":"2010-06-14T22:20:30","date_gmt":"2010-06-14T16:50:30","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=1093"},"modified":"2010-06-14T22:22:04","modified_gmt":"2010-06-14T16:52:04","slug":"jquery-alert-message-without-using-traditional-javascript-alert-box","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/","title":{"rendered":"jQuery Alert Message without using traditional javascript alert-box."},"content":{"rendered":"<p>This post might help you if you want to display alert messages without using tradition javascript (irritating) alert.<br \/>\nTo achieve this you need jQuery for your frontend UI.<\/p>\n<p>Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically.<\/p>\n<blockquote>\n<pre lang=\"javascript\">function displayAlertMessage(message) {\r\nvar timeOut = 5\r\njQuery('#messageBox').text(message).fadeIn()\r\njQuery('#messageBox').css(\"display\", \"block\")\r\nsetTimeout(function() {\r\njQuery('#messageBox').fadeOut()\r\njQuery('#messageBox').css(\"display\", \"none\")\r\n}, timeOut * 1000);\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>messageBox is id of your div tag where you want to display the Alert Message.<br \/>\ntimeOut is number of seconds you want to hold message on screen.<br \/>\nThat&#8217;s it. So simple and quite comfortable from a user&#8217;s perspective Isn&#8217;t it? \ud83d\ude42<\/p>\n<p>Cheers!!<br \/>\nSalil Kalia<\/p>\n<p>\ufeff<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post might help you if you want to display alert messages without using tradition javascript (irritating) alert. To achieve this you need jQuery for your frontend UI. Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically. function displayAlertMessage(message) { var timeOut = 5 jQuery(&#8216;#messageBox&#8217;).text(message).fadeIn() [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":39,"footnotes":""},"categories":[1],"tags":[282,55,27],"class_list":["post-1093","post","type-post","status-publish","format-standard","hentry","category-technology","tag-custom-alert-messages","tag-javascript","tag-jquery"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"This post might help you if you want to display alert messages without using tradition javascript (irritating) alert. To achieve this you need jQuery for your frontend UI. Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically. function displayAlertMessage(message) { var timeOut = 5 jQuery(&#039;#messageBox&#039;).text(message).fadeIn()\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Salil\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"TO THE NEW BLOG\" \/>\n\t\t<meta property=\"og:type\" content=\"blog\" \/>\n\t\t<meta property=\"og:title\" content=\"jQuery Alert Message without using traditional javascript alert-box. | TO THE NEW Blog\" \/>\n\t\t<meta property=\"og:description\" content=\"This post might help you if you want to display alert messages without using tradition javascript (irritating) alert. To achieve this you need jQuery for your frontend UI. Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically. function displayAlertMessage(message) { var timeOut = 5 jQuery(&#039;#messageBox&#039;).text(message).fadeIn()\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@tothenew\" \/>\n\t\t<meta name=\"twitter:title\" content=\"jQuery Alert Message without using traditional javascript alert-box. | TO THE NEW Blog\" \/>\n\t\t<meta name=\"twitter:description\" content=\"This post might help you if you want to display alert messages without using tradition javascript (irritating) alert. To achieve this you need jQuery for your frontend UI. Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically. function displayAlertMessage(message) { var timeOut = 5 jQuery(&#039;#messageBox&#039;).text(message).fadeIn()\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-alert-message-without-using-traditional-javascript-alert-box\\\/#article\",\"name\":\"jQuery Alert Message without using traditional javascript alert-box. | TO THE NEW Blog\",\"headline\":\"jQuery Alert Message without using traditional javascript alert-box.\",\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/salil\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"},\"datePublished\":\"2010-06-14T22:20:30+05:30\",\"dateModified\":\"2010-06-14T22:22:04+05:30\",\"inLanguage\":\"en-US\",\"commentCount\":5,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-alert-message-without-using-traditional-javascript-alert-box\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-alert-message-without-using-traditional-javascript-alert-box\\\/#webpage\"},\"articleSection\":\"Technology, custom alert messages, javascript, jquery\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-alert-message-without-using-traditional-javascript-alert-box\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/technology\\\/#listItem\",\"name\":\"Technology\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/technology\\\/#listItem\",\"position\":2,\"name\":\"Technology\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/technology\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-alert-message-without-using-traditional-javascript-alert-box\\\/#listItem\",\"name\":\"jQuery Alert Message without using traditional javascript alert-box.\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-alert-message-without-using-traditional-javascript-alert-box\\\/#listItem\",\"position\":3,\"name\":\"jQuery Alert Message without using traditional javascript alert-box.\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/technology\\\/#listItem\",\"name\":\"Technology\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\",\"name\":\"TO THE NEW Blog\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/salil\\\/#author\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/salil\\\/\",\"name\":\"Salil\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-alert-message-without-using-traditional-javascript-alert-box\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/97e216cba95b296d5909ad7b93d1c338d0fdad7b95410c9412b126a90f4735d9?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Salil\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-alert-message-without-using-traditional-javascript-alert-box\\\/#webpage\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-alert-message-without-using-traditional-javascript-alert-box\\\/\",\"name\":\"jQuery Alert Message without using traditional javascript alert-box. | TO THE NEW Blog\",\"description\":\"This post might help you if you want to display alert messages without using tradition javascript (irritating) alert. To achieve this you need jQuery for your frontend UI. Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically. function displayAlertMessage(message) { var timeOut = 5 jQuery('#messageBox').text(message).fadeIn()\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/jquery-alert-message-without-using-traditional-javascript-alert-box\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/salil\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/salil\\\/#author\"},\"datePublished\":\"2010-06-14T22:20:30+05:30\",\"dateModified\":\"2010-06-14T22:22:04+05:30\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\",\"name\":\"TO THE NEW Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"jQuery Alert Message without using traditional javascript alert-box. | TO THE NEW Blog","description":"This post might help you if you want to display alert messages without using tradition javascript (irritating) alert. To achieve this you need jQuery for your frontend UI. Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically. function displayAlertMessage(message) { var timeOut = 5 jQuery('#messageBox').text(message).fadeIn()","canonical_url":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/#article","name":"jQuery Alert Message without using traditional javascript alert-box. | TO THE NEW Blog","headline":"jQuery Alert Message without using traditional javascript alert-box.","author":{"@id":"https:\/\/2thenew.online\/blog\/author\/salil\/#author"},"publisher":{"@id":"https:\/\/2thenew.online\/blog\/#organization"},"datePublished":"2010-06-14T22:20:30+05:30","dateModified":"2010-06-14T22:22:04+05:30","inLanguage":"en-US","commentCount":5,"mainEntityOfPage":{"@id":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/#webpage"},"isPartOf":{"@id":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/#webpage"},"articleSection":"Technology, custom alert messages, javascript, jquery"},{"@type":"BreadcrumbList","@id":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog#listItem","position":1,"name":"Home","item":"https:\/\/2thenew.online\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog\/category\/technology\/#listItem","name":"Technology"}},{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog\/category\/technology\/#listItem","position":2,"name":"Technology","item":"https:\/\/2thenew.online\/blog\/category\/technology\/","nextItem":{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/#listItem","name":"jQuery Alert Message without using traditional javascript alert-box."},"previousItem":{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/#listItem","position":3,"name":"jQuery Alert Message without using traditional javascript alert-box.","previousItem":{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog\/category\/technology\/#listItem","name":"Technology"}}]},{"@type":"Organization","@id":"https:\/\/2thenew.online\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/2thenew.online\/blog\/"},{"@type":"Person","@id":"https:\/\/2thenew.online\/blog\/author\/salil\/#author","url":"https:\/\/2thenew.online\/blog\/author\/salil\/","name":"Salil","image":{"@type":"ImageObject","@id":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/97e216cba95b296d5909ad7b93d1c338d0fdad7b95410c9412b126a90f4735d9?s=96&d=mm&r=g","width":96,"height":96,"caption":"Salil"}},{"@type":"WebPage","@id":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/#webpage","url":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/","name":"jQuery Alert Message without using traditional javascript alert-box. | TO THE NEW Blog","description":"This post might help you if you want to display alert messages without using tradition javascript (irritating) alert. To achieve this you need jQuery for your frontend UI. Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically. function displayAlertMessage(message) { var timeOut = 5 jQuery('#messageBox').text(message).fadeIn()","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/2thenew.online\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/#breadcrumblist"},"author":{"@id":"https:\/\/2thenew.online\/blog\/author\/salil\/#author"},"creator":{"@id":"https:\/\/2thenew.online\/blog\/author\/salil\/#author"},"datePublished":"2010-06-14T22:20:30+05:30","dateModified":"2010-06-14T22:22:04+05:30"},{"@type":"WebSite","@id":"https:\/\/2thenew.online\/blog\/#website","url":"https:\/\/2thenew.online\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/2thenew.online\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"TO THE NEW BLOG","og:type":"blog","og:title":"jQuery Alert Message without using traditional javascript alert-box. | TO THE NEW Blog","og:description":"This post might help you if you want to display alert messages without using tradition javascript (irritating) alert. To achieve this you need jQuery for your frontend UI. Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically. function displayAlertMessage(message) { var timeOut = 5 jQuery('#messageBox').text(message).fadeIn()","og:url":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/","og:image":"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","og:image:secure_url":"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","twitter:card":"summary","twitter:site":"@tothenew","twitter:title":"jQuery Alert Message without using traditional javascript alert-box. | TO THE NEW Blog","twitter:description":"This post might help you if you want to display alert messages without using tradition javascript (irritating) alert. To achieve this you need jQuery for your frontend UI. Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically. function displayAlertMessage(message) { var timeOut = 5 jQuery('#messageBox').text(message).fadeIn()","twitter:image":"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png"},"aioseo_meta_data":{"post_id":"1093","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"created":"2021-04-29 13:27:23","updated":"2024-02-29 08:44:21","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/2thenew.online\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/2thenew.online\/blog\/category\/technology\/\" title=\"Technology\">Technology<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tjQuery Alert Message without using traditional javascript alert-box.\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/2thenew.online\/blog"},{"label":"Technology","link":"https:\/\/2thenew.online\/blog\/category\/technology\/"},{"label":"jQuery Alert Message without using traditional javascript alert-box.","link":"https:\/\/2thenew.online\/blog\/jquery-alert-message-without-using-traditional-javascript-alert-box\/"}],"_links":{"self":[{"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/posts\/1093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/comments?post=1093"}],"version-history":[{"count":0,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/posts\/1093\/revisions"}],"wp:attachment":[{"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/media?parent=1093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/categories?post=1093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/tags?post=1093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}