{"id":6432,"date":"2019-04-30T01:30:14","date_gmt":"2019-04-29T20:00:14","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=6432"},"modified":"2020-12-09T11:00:25","modified_gmt":"2020-12-09T05:30:25","slug":"make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/","title":{"rendered":"Make Your JavaScript Alerts and Confirmation Boxes more Fancier in 10 Minutes"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/confirmation-box.png\" alt=\"Confirmation Box\" class=\"wp-image-14019\" width=\"748\" height=\"229\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/confirmation-box.png 997w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/confirmation-box-300x92.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/confirmation-box-768x235.png 768w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/figure><\/div>\n\n\n\n<p>Nowadays web applications are very attractive in terms of graphics and having a great look and feel. In this type of applications, they focus on design their pop-up boxes, confirmation-popups or alert boxes that they must appropriate with their theming and also gives enchanting views to the application.<\/p>\n\n\n\n<p>In this, we are going to check how can we turn the browser\u2019s built-in confirmation box to Bootstrap\u2019s models and design it in your way which gives ravishing look to your application. For this, we are going to use \u2018<a href=\"https:\/\/github.com\/ifad\/data-confirm-modal\" target=\"_blank\" rel=\"noopener noreferrer\">data-confirm-modal<\/a>\u2019 gem.<\/p>\n\n\n\n<p><strong>Let\u2019s start!<\/strong><\/p>\n\n\n\n<p><strong>Step 1:<\/strong> First of all create brand new Rails application.<\/p>\n\n\n\n<p><code>$ rails new CustomConfirmBox<\/code><\/p>\n\n\n\n<p><strong>Step 2:<\/strong> Add the following gems in your gemfile:<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/TejasviniParikhbtc\/17db936cf47d682731d40c3c91a44a70.js\"><\/script><\/p>\n\n\n\n<p><strong>Step 3:<\/strong> Include the following lines in your application.js.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/TejasviniParikhbtc\/caf62d12009f0bb111dfd422a5b1b2e4.js\"><\/script><\/p>\n\n\n\n<p><strong>Step 4:<\/strong> Import bootstrap by adding this line in application.scss.<\/p>\n\n\n\n<p><code>@import \"bootstrap\";<\/code><\/p>\n\n\n\n<p>Now, reload your browser and voila!!<\/p>\n\n\n\n<p>You can see the vast difference in your new confirmation or alert boxes.<\/p>\n\n\n\n<p><code>&lt;%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %&gt;<\/code><\/p>\n\n\n\n<p><strong>Before:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-1-1-2.png\" alt=\"Output 1\" class=\"wp-image-14020\" width=\"743\" height=\"331\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-1-1-2.png 991w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-1-1-2-300x134.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-1-1-2-768x342.png 768w\" sizes=\"auto, (max-width: 743px) 100vw, 743px\" \/><\/figure><\/div>\n\n\n\n<p><strong>After:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-2-2-1-1024x278.png\" alt=\"Output 2\" class=\"wp-image-14021\" width=\"768\" height=\"209\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-2-2-1-1024x278.png 1024w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-2-2-1-300x82.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-2-2-1-768x209.png 768w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-2-2-1.png 1049w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p>Let\u2019s customize the confirmation box by using data attributes given below:<\/p>\n\n\n\n<p><strong>Title:<\/strong> Display text as modal title.<\/p>\n\n\n\n<p><strong>Commit:<\/strong> Text for success button.<\/p>\n\n\n\n<p><strong>Cancel:<\/strong> Text for the cancel button.<\/p>\n\n\n\n<p><strong>Verify:<\/strong> Text for verification.<\/p>\n\n\n\n<p><strong>Verify Text:<\/strong> Information message for a user which contains text that user needs to type for verification.<\/p>\n\n\n\n<p>Let\u2019s see some more examples with customization using the above properties.<\/p>\n\n\n\n<p><code>&lt;%= link_to 'Destroy', user, method: :delete, id: 'delete_link',data: { confirm: 'Do you Really want to delete it?', title: 'Confirm Deletion' } %&gt;<\/code><\/p>\n\n\n\n<p>This link generates a confirmation box as shown in the below image.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-3-1-1-1024x280.png\" alt=\"Output 3\" class=\"wp-image-14022\" width=\"768\" height=\"210\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-3-1-1-1024x280.png 1024w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-3-1-1-300x82.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-3-1-1-768x210.png 768w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-3-1-1.png 1061w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p>We can change the labels of commit and cancel button as well.<\/p>\n\n\n\n<p><code>&lt;%= link_to 'Destroy', user, method: :delete, id: 'delete_link',data: { confirm: 'Do you really want to delete it?', title: 'Confirm Deletion', commit: 'YES', cancel: 'NO' } %&gt;<\/code><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-4-2-1024x274.png\" alt=\"Output 4\" class=\"wp-image-14023\" width=\"768\" height=\"206\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-4-2-1024x274.png 1024w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-4-2-300x80.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-4-2-768x205.png 768w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-4-2.png 1069w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p>If we add verify: &#8216;Yes&#8217;, verify_text: &#8216;Type &#8220;Yes&#8221; to confirm&#8217; &nbsp;data attributes then you can see confirmation box as displayed in below image. By default confirm button is disabled once you write valid text in given textarea then it will enable the confirm button.<\/p>\n\n\n\n<p><em>*Note that it is case-sensitive.<\/em><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-5-2.png\" alt=\"Output 5\" class=\"wp-image-14024\" width=\"768\" height=\"247\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-5-2.png 1024w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-5-2-300x96.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-5-2-768x247.png 768w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p>We can set global values and can apply a custom CSS class to popup modals as well.<\/p>\n\n\n\n<p>Let\u2019s go through some more interesting examples for better understanding :<\/p>\n\n\n\n<p><strong>1. Add one javascript file named: confirm-modal.js and add the following code.<\/strong><\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/TejasviniParikhbtc\/bccab505aee9dea68c8db6034a401bae.js\"><\/script><\/p>\n\n\n\n<p><strong>2. Require that js file in application.js by the following the line.<\/strong><\/p>\n\n\n\n<p><code>\/\/= require confirm-modal<\/code><\/p>\n\n\n\n<p><strong>3. Add given code to your scss file.<\/strong><\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/TejasviniParikhbtc\/353dee18a380081a2b62579ac3f031de.js\"><\/script><\/p>\n\n\n\n<p><strong>4. Give link for confirm-modal.<\/strong><\/p>\n\n\n\n<p><code>&lt;%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Do you want to continue?' } %&gt;<\/code><\/p>\n\n\n\n<p>Above example will generate a confirmation box like given below:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-6-1-1024x278.png\" alt=\"Output 6\" class=\"wp-image-14025\" width=\"768\" height=\"209\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-6-1-1024x278.png 1024w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-6-1-300x82.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-6-1-768x209.png 768w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-6-1.png 1038w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p>We can restore default settings using dataConfirmModal.restoreDefaults() .<\/p>\n\n\n\n<p>I hope you enjoyed this article. Keep following for more such articles.<\/p>\n\n\n\n<p>You can access full codebase on this git repo:<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/TejasviniParikhbtc\/CustomConfirmBox\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/github.com\/TejasviniParikhbtc\/CustomConfirmBox<\/a><\/p>\n\n\n\n<p>Have a happy coding!<\/p>\n\n\n\n<p><a href=\"https:\/\/www.botreetechnologies.com\/web-application-development\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Click here for more details&#8230;<\/strong><\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>At <a href=\"https:\/\/www.botreetechnologies.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">BoTree Technologies<\/a>, we build enterprise apps with our web development team of 30+ engineers.<\/p>\n\n\n\n<p>We also specialize in RPA, AI, Python, Django, JavaScript and ReactJS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/www.botreetechnologies.com\/contact\" target=\"_blank\" rel=\"noopener noreferrer\">Consulting is free<\/a> &#8211; let us help you grow!<\/h3>\n","protected":false},"excerpt":{"rendered":"<p>Nowadays web applications are very attractive in terms of graphics&#8230;<\/p>\n","protected":false},"author":41,"featured_media":14018,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,57],"tags":[],"class_list":["post-6432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Make Your JavaScript Alerts and Confirmation Boxes More Fancier In 10 Minutes<\/title>\n<meta name=\"description\" content=\"Showing fancier popup boxes using data confirm modal - Ruby Gem with different configurations.\" \/>\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.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make Your JavaScript Alerts and Confirmation Boxes More Fancier In 10 Minutes\" \/>\n<meta property=\"og:description\" content=\"Showing fancier popup boxes using data confirm modal - Ruby Gem with different configurations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/\" \/>\n<meta property=\"og:site_name\" content=\"BoTree Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BoTreeTechnologies\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-29T20:00:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-09T05:30:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/javaccript-alert-boxes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tejasvini Parikh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:site\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tejasvini Parikh\" \/>\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.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/\"},\"author\":{\"name\":\"Tejasvini Parikh\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/ff868c66df058fb8512eb4b66504e170\"},\"headline\":\"Make Your JavaScript Alerts and Confirmation Boxes more Fancier in 10 Minutes\",\"datePublished\":\"2019-04-29T20:00:14+00:00\",\"dateModified\":\"2020-12-09T05:30:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/\"},\"wordCount\":449,\"commentCount\":12,\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/javaccript-alert-boxes.jpg\",\"articleSection\":[\"Development\",\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/\",\"name\":\"Make Your JavaScript Alerts and Confirmation Boxes More Fancier In 10 Minutes\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/javaccript-alert-boxes.jpg\",\"datePublished\":\"2019-04-29T20:00:14+00:00\",\"dateModified\":\"2020-12-09T05:30:25+00:00\",\"author\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/ff868c66df058fb8512eb4b66504e170\"},\"description\":\"Showing fancier popup boxes using data confirm modal - Ruby Gem with different configurations.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#primaryimage\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/javaccript-alert-boxes.jpg\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/javaccript-alert-boxes.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"JavaScript Alerts and Confirmation Boxes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.botreetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make Your JavaScript Alerts and Confirmation Boxes more Fancier in 10 Minutes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/\",\"name\":\"BoTree Technologies\",\"description\":\"Committed to inspire generation.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/ff868c66df058fb8512eb4b66504e170\",\"name\":\"Tejasvini Parikh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/tejasvini-parikh-150x150.png\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/tejasvini-parikh-150x150.png\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/tejasvini-parikh-150x150.png\",\"caption\":\"Tejasvini Parikh\"},\"description\":\"Tejasvini is a Ruby on Rails developer. She loves Ruby, JavaScript and reading blogs. She loves travelling, music and also likes to prepare new dishes.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Make Your JavaScript Alerts and Confirmation Boxes More Fancier In 10 Minutes","description":"Showing fancier popup boxes using data confirm modal - Ruby Gem with different configurations.","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.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/","og_locale":"en_US","og_type":"article","og_title":"Make Your JavaScript Alerts and Confirmation Boxes More Fancier In 10 Minutes","og_description":"Showing fancier popup boxes using data confirm modal - Ruby Gem with different configurations.","og_url":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/","og_site_name":"BoTree Technologies","article_publisher":"https:\/\/www.facebook.com\/BoTreeTechnologies\/","article_published_time":"2019-04-29T20:00:14+00:00","article_modified_time":"2020-12-09T05:30:25+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/javaccript-alert-boxes.jpg","type":"image\/jpeg"}],"author":"Tejasvini Parikh","twitter_card":"summary_large_image","twitter_creator":"@BoTreeTech","twitter_site":"@BoTreeTech","twitter_misc":{"Written by":"Tejasvini Parikh","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#article","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/"},"author":{"name":"Tejasvini Parikh","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/ff868c66df058fb8512eb4b66504e170"},"headline":"Make Your JavaScript Alerts and Confirmation Boxes more Fancier in 10 Minutes","datePublished":"2019-04-29T20:00:14+00:00","dateModified":"2020-12-09T05:30:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/"},"wordCount":449,"commentCount":12,"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/javaccript-alert-boxes.jpg","articleSection":["Development","Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/","url":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/","name":"Make Your JavaScript Alerts and Confirmation Boxes More Fancier In 10 Minutes","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#primaryimage"},"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/javaccript-alert-boxes.jpg","datePublished":"2019-04-29T20:00:14+00:00","dateModified":"2020-12-09T05:30:25+00:00","author":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/ff868c66df058fb8512eb4b66504e170"},"description":"Showing fancier popup boxes using data confirm modal - Ruby Gem with different configurations.","breadcrumb":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#primaryimage","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/javaccript-alert-boxes.jpg","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/javaccript-alert-boxes.jpg","width":1920,"height":1280,"caption":"JavaScript Alerts and Confirmation Boxes"},{"@type":"BreadcrumbList","@id":"https:\/\/www.botreetechnologies.com\/blog\/make-your-javascript-alerts-and-confirmation-boxes-more-fancier-in-10-minutes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.botreetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make Your JavaScript Alerts and Confirmation Boxes more Fancier in 10 Minutes"}]},{"@type":"WebSite","@id":"https:\/\/www.botreetechnologies.com\/blog\/#website","url":"https:\/\/www.botreetechnologies.com\/blog\/","name":"BoTree Technologies","description":"Committed to inspire generation.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/ff868c66df058fb8512eb4b66504e170","name":"Tejasvini Parikh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/tejasvini-parikh-150x150.png","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/tejasvini-parikh-150x150.png","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/tejasvini-parikh-150x150.png","caption":"Tejasvini Parikh"},"description":"Tejasvini is a Ruby on Rails developer. She loves Ruby, JavaScript and reading blogs. She loves travelling, music and also likes to prepare new dishes."}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/6432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=6432"}],"version-history":[{"count":3,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/6432\/revisions"}],"predecessor-version":[{"id":14027,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/6432\/revisions\/14027"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media\/14018"}],"wp:attachment":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=6432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=6432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=6432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}