{"id":4639,"date":"2021-05-04T11:04:00","date_gmt":"2021-05-04T11:04:00","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=4639"},"modified":"2021-05-04T11:12:26","modified_gmt":"2021-05-04T11:12:26","slug":"display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/","title":{"rendered":"Display Beautiful and Responsive Alert\/Confirm\/Prompt Dialog Box in JavaScript"},"content":{"rendered":"<p>In JavaScript, three kinds of dialog boxes are available, Alert box, Confirm box, and Prompt box. These popup boxes are used to show the status message on the browser, based on the action requested by the user. Generally, the alert(), confirm(), prompt() methods are used to display Alert\/Confirm\/Prompt boxes in JavaScript.<\/p>\n<p><b>Alert Dialog Box:<\/b><br \/>\nThe <code>alert()<\/code> method shows a popup box with a specific message and an &#8220;Ok&#8221; button.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">alert(message)<\/pre>\n<p><b>Confirm Dialog Box:<\/b><br \/>\nThe <code>confirm()<\/code> method shows a popup box with a specific message, along with an &#8220;Ok&#8221; and &#8220;Cancel&#8221; button.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">confirm(message)<\/pre>\n<p><b>Prompt Dialog Box:<\/b><br \/>\nThe <code>prompt()<\/code> method shows a popup box with an input field, along with an &#8220;Ok&#8221; and &#8220;Cancel&#8221; button.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">prompt(text, defaultText)<\/pre>\n<p>The browser&#8217;s default alert box can be replaced with a beautiful dialog box using the JavaScript plugin. The SweetAlert is an easy-to-use plugin that helps to display beautiful and responsive alert boxes using JavaScript. This tutorial will show you how to display beautiful and responsive Alert, Confirm, and Prompt popup boxes with SweetAlert in JavaScript.<\/p>\n<p>Before getting started, include the SweetAlert JavaScript library.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"sweetalert.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>Now, you can use the global <code>swal<\/code> variable to show an alert dialog.<\/p>\n<h2>Showing an Alert<\/h2>\n<p>Call the <b>swal()<\/b> function and pass the message.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">swal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Hello CodexWorld!\"<\/span>);<\/pre>\n<h2>Alert Box with Title and Text<\/h2>\n<p>Pass two arguments to show a title and text in the alert box, first one will be the title and the second one is the text.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">swal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Here's the title!\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"...and here's the text!\"<\/span>);<\/pre>\n<h2>Alert Box with Status<\/h2>\n<p>Pass status in the third argument to add an icon in an alert box. There are 4 predefined: <code>warning<\/code>, <code>error<\/code>, <code>success<\/code> and <code>info<\/code>.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">swal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Operation success!\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"You clicked the button!\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"success\"<\/span>);<\/pre>\n<pre style=\"color: rgb(110, 107, 94);\">swal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Operation failed!\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"You clicked the button!\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"error\"<\/span>);<\/pre>\n<h2>swal Object Options<\/h2>\n<p>You can use arguments as options with swal object.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">swal({\r\n  title: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Hello CodexWorld!\"<\/span>,\r\n  text: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"You clicked the button!\"<\/span>,\r\n  icon: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"success\"<\/span>,\r\n});<\/pre>\n<h2>Alert Box with Custom Button Text<\/h2>\n<p>Use the <code>button<\/code> option to specify the text of the confirm button.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">swal({\r\n  title: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Operation success!\"<\/span>,\r\n  text: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"You clicked the button!\"<\/span>,\r\n  icon: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"success\"<\/span>,\r\n  button: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Aww yiss!\"<\/span>,\r\n});<\/pre>\n<h2>Confirm Dialog Box<\/h2>\n<p>The following code snippet shows a confirm popup box.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">swal({\r\n  title: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Are you sure?\"<\/span>,\r\n  text: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Once deleted, this operation can't be reverted!\"<\/span>,\r\n  icon: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"warning\"<\/span>,\r\n  buttons: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n  dangerMode: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n})\r\n.then((willDelete) =&gt; {\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (willDelete) {\r\n    swal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Done! Your file has been deleted!\"<\/span>, {\r\n      icon: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"success\"<\/span>,\r\n    });\r\n  } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n    swal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Delete operation is cancelled!\"<\/span>);\r\n  }\r\n});<\/pre>\n<h2>Alert Dialog with Ajax Request<\/h2>\n<p>The following code snippet shows how to integrate ajax request in the Alert popup box.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">swal({\r\n  text: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Search for a movie. e.g. \"La La Land\".'<\/span>,\r\n  content: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"input\"<\/span>,\r\n  button: {\r\n    text: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Search!\"<\/span>,\r\n    closeModal: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\r\n  },\r\n})\r\n.then(name =&gt; {\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (!name) <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">throw<\/span> <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>;\r\n \r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> fetch(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">`https:\/\/itunes.apple.com\/search?term=<span class=\"hljs-subst\">${name}<\/span>&amp;entity=movie`<\/span>);\r\n})\r\n.then(results =&gt; {\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> results.json();\r\n})\r\n.then(json =&gt; {\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> movie = json.results[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>];\r\n \r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (!movie) {\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> swal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"No movie was found!\"<\/span>);\r\n  }\r\n \r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> name = movie.trackName;\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> imageURL = movie.artworkUrl100;\r\n \r\n  swal({\r\n    title: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Top result:\"<\/span>,\r\n    text: name,\r\n    icon: imageURL,\r\n  });\r\n})\r\n.catch(err =&gt; {\r\n  <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (err) {\r\n    swal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Oh noes!\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"The AJAX request failed!\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"error\"<\/span>);\r\n  } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n    swal.stopLoading();\r\n    swal.close();\r\n  }\r\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In JavaScript, three kinds of dialog boxes are available, Alert box, Confirm box, and Prompt box. These popup boxes are used to show the status message on the browser, based on the action requested by <\/p>\n","protected":false},"author":1,"featured_media":4641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[125,143,348,66,347,349],"class_list":["post-4639","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-alertbox","tag-confirm","tag-dialog","tag-javascript","tag-prompt","tag-sweetalert","cat-10-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Display Beautiful and Responsive Alert\/Confirm\/Prompt Dialog Box in JavaScript - CodexWorld<\/title>\n<meta name=\"description\" content=\"Custom alert dialog box using JavaScript - Replace browser&#039;s default Alert box, Confirm box, and Prompt box with beautiful and responsive popup boxes. Display alert dialog with SweetAlert in JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Display Beautiful and Responsive Alert\/Confirm\/Prompt Dialog Box in JavaScript - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Custom alert dialog box using JavaScript - Replace browser&#039;s default Alert box, Confirm box, and Prompt box with beautiful and responsive popup boxes. Display alert dialog with SweetAlert in JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-04T11:04:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-04T11:12:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/05\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Display Beautiful and Responsive Alert\\\/Confirm\\\/Prompt Dialog Box in JavaScript\",\"datePublished\":\"2021-05-04T11:04:00+00:00\",\"dateModified\":\"2021-05-04T11:12:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/\"},\"wordCount\":323,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png\",\"keywords\":[\"AlertBox\",\"Confirm\",\"Dialog\",\"JavaScript\",\"Prompt\",\"SweetAlert\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/\",\"name\":\"Display Beautiful and Responsive Alert\\\/Confirm\\\/Prompt Dialog Box in JavaScript - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png\",\"datePublished\":\"2021-05-04T11:04:00+00:00\",\"dateModified\":\"2021-05-04T11:12:26+00:00\",\"description\":\"Custom alert dialog box using JavaScript - Replace browser's default Alert box, Confirm box, and Prompt box with beautiful and responsive popup boxes. Display alert dialog with SweetAlert in JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Display Beautiful and Responsive Alert\\\/Confirm\\\/Prompt Dialog Box in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Display Beautiful and Responsive Alert\/Confirm\/Prompt Dialog Box in JavaScript - CodexWorld","description":"Custom alert dialog box using JavaScript - Replace browser's default Alert box, Confirm box, and Prompt box with beautiful and responsive popup boxes. Display alert dialog with SweetAlert in JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Display Beautiful and Responsive Alert\/Confirm\/Prompt Dialog Box in JavaScript - CodexWorld","og_description":"Custom alert dialog box using JavaScript - Replace browser's default Alert box, Confirm box, and Prompt box with beautiful and responsive popup boxes. Display alert dialog with SweetAlert in JavaScript.","og_url":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2021-05-04T11:04:00+00:00","article_modified_time":"2021-05-04T11:12:26+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/05\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Display Beautiful and Responsive Alert\/Confirm\/Prompt Dialog Box in JavaScript","datePublished":"2021-05-04T11:04:00+00:00","dateModified":"2021-05-04T11:12:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/"},"wordCount":323,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/05\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png","keywords":["AlertBox","Confirm","Dialog","JavaScript","Prompt","SweetAlert"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/","url":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/","name":"Display Beautiful and Responsive Alert\/Confirm\/Prompt Dialog Box in JavaScript - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/05\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png","datePublished":"2021-05-04T11:04:00+00:00","dateModified":"2021-05-04T11:12:26+00:00","description":"Custom alert dialog box using JavaScript - Replace browser's default Alert box, Confirm box, and Prompt box with beautiful and responsive popup boxes. Display alert dialog with SweetAlert in JavaScript.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/05\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/05\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png","width":1366,"height":768,"caption":"responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/display-beautiful-responsive-alert-confirm-prompt-dialog-box-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Display Beautiful and Responsive Alert\/Confirm\/Prompt Dialog Box in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/05\/responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-1cP","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=4639"}],"version-history":[{"count":1,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4639\/revisions"}],"predecessor-version":[{"id":4640,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4639\/revisions\/4640"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/4641"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=4639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=4639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=4639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}