{"id":44798,"date":"2018-06-01T21:01:23","date_gmt":"2018-06-01T13:01:23","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=44798"},"modified":"2023-04-06T19:12:06","modified_gmt":"2023-04-06T11:12:06","slug":"tinglejs-modal-window","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/","title":{"rendered":"Free Vanilla JS Modal Window Script &#8211; Tingle.js"},"content":{"rendered":"<p>Modal windows have quickly replaced the default browser alert box. Well-designed modals are more compatible with a <a href=\"https:\/\/www.hongkiat.com\/blog\/ux-and-ux-designers\/\">great user experience<\/a> and <strong>modal windows come with many custom effects and designs<\/strong>.<\/p>\n<p>It\u2019s possible to build pure CSS modals but these often lack a certain <em>je ne sais quoi<\/em> that you\u2019ll find in JS-powered scripts.<\/p>\n<p>And one of my favorites is <a href=\"https:\/\/robinparisi.github.io\/tingle\/\" target=\"_blank\" rel=\"noopener\">Tingle.js<\/a>, a free JavaScript modal window built for minimalist websites.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/\" rel=\"noopener\">Build Modals Using Pure CSS With CSS Modal<\/a><\/p>\n<figure><a href=\"https:\/\/robinparisi.github.io\/tingle\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/tinglejs-modal-window\/01-tinglejs-script.jpg\" alt=\"tingle.js modal plugin\" width=\"1000\" height=\"479\"><\/a><\/figure>\n<p>This library has been around for a while but it\u2019s still technically in v1.0 development with frequent improvements.<\/p>\n<p>But it\u2019s a <strong>stable script running on pure vanilla JS<\/strong> so you can use this anywhere. It doesn\u2019t require any knowledge of <a href=\"https:\/\/www.hongkiat.com\/blog\/ecmascript-6\/\">ECMAScript<\/a> nor do you need any higher-level libraries like TypeScript.<\/p>\n<p>Everything in Tingle.js is well documented and even comes with a clear API for customizing the animations, button effects, and callback functions.<\/p>\n<p>Take a look at the <a href=\"https:\/\/github.com\/robinparisi\/tingle\" target=\"_blank\" rel=\"noopener\">GitHub repo<\/a> for <strong>more info with links to the main API<\/strong> and callback functions, all of which you\u2019ll find in great detail on the <a href=\"https:\/\/robinparisi.github.io\/tingle\/\" target=\"_blank\" rel=\"noopener\">Tingle.js homepage<\/a>.<\/p>\n<p>If you feel comfortable editing JavaScript then you\u2019ll love this plugin. It\u2019s super easy to work with and the CSS codes are even easier to overwrite with your own stylesheet.<\/p>\n<p>The main documentation is clearly outlined with live examples you can <strong>copy\/paste into your HTML<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/tinglejs-modal-window\/02-tinglejs-animation-example.gif\" alt=\"tinglejs animation modal example\" width=\"1269\" height=\"591\"><\/figure>\n<p>Tingle.js is a pretty straightforward script. You\u2019ll either like the way it works, or you won\u2019t.<\/p>\n<p>With a few minutes on the main <a href=\"https:\/\/robinparisi.github.io\/tingle\/\" target=\"_blank\" rel=\"noopener\">demo page<\/a>, you should be able to tell if you like this or not. It supports as many buttons as you need along with user input fields if you wanna pull info from the user.<\/p>\n<p>Plus this can work with <strong>huge lengthy modals in terms of service<\/strong>, custom alert messages, and even embedded content with images & videos.<\/p>\n<p>Definitely one of the most well-supported modal windows out there and the clean design is easy to restyle for any layout.<\/p>","protected":false},"excerpt":{"rendered":"<p>A free library of JavaScript modal window built for minimalist websites that is also really easy to work with.<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3497,1284,4406],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Free Vanilla JS Modal Window Script - Tingle.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"A free library of JavaScript modal window built for minimalist websites that is also really easy to work with.\" \/>\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.hongkiat.com\/blog\/tinglejs-modal-window\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Free Vanilla JS Modal Window Script - Tingle.js\" \/>\n<meta property=\"og:description\" content=\"A free library of JavaScript modal window built for minimalist websites that is also really easy to work with.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-01T13:01:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:12:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/tinglejs-modal-window\/01-tinglejs-script.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Free Vanilla JS Modal Window Script &#8211; Tingle.js\",\"datePublished\":\"2018-06-01T13:01:23+00:00\",\"dateModified\":\"2023-04-06T11:12:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/\"},\"wordCount\":342,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tinglejs-modal-window\\\/01-tinglejs-script.jpg\",\"keywords\":[\"Javascript Library\",\"minimalistic\",\"vanilla\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/\",\"name\":\"Free Vanilla JS Modal Window Script - Tingle.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tinglejs-modal-window\\\/01-tinglejs-script.jpg\",\"datePublished\":\"2018-06-01T13:01:23+00:00\",\"dateModified\":\"2023-04-06T11:12:06+00:00\",\"description\":\"A free library of JavaScript modal window built for minimalist websites that is also really easy to work with.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tinglejs-modal-window\\\/01-tinglejs-script.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tinglejs-modal-window\\\/01-tinglejs-script.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tinglejs-modal-window\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Free Vanilla JS Modal Window Script &#8211; Tingle.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Free Vanilla JS Modal Window Script - Tingle.js - Hongkiat","description":"A free library of JavaScript modal window built for minimalist websites that is also really easy to work with.","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.hongkiat.com\/blog\/tinglejs-modal-window\/","og_locale":"en_US","og_type":"article","og_title":"Free Vanilla JS Modal Window Script - Tingle.js","og_description":"A free library of JavaScript modal window built for minimalist websites that is also really easy to work with.","og_url":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-06-01T13:01:23+00:00","article_modified_time":"2023-04-06T11:12:06+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/tinglejs-modal-window\/01-tinglejs-script.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Free Vanilla JS Modal Window Script &#8211; Tingle.js","datePublished":"2018-06-01T13:01:23+00:00","dateModified":"2023-04-06T11:12:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/"},"wordCount":342,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/tinglejs-modal-window\/01-tinglejs-script.jpg","keywords":["Javascript Library","minimalistic","vanilla"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/","url":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/","name":"Free Vanilla JS Modal Window Script - Tingle.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/tinglejs-modal-window\/01-tinglejs-script.jpg","datePublished":"2018-06-01T13:01:23+00:00","dateModified":"2023-04-06T11:12:06+00:00","description":"A free library of JavaScript modal window built for minimalist websites that is also really easy to work with.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/tinglejs-modal-window\/01-tinglejs-script.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/tinglejs-modal-window\/01-tinglejs-script.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/tinglejs-modal-window\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Free Vanilla JS Modal Window Script &#8211; Tingle.js"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-bEy","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/44798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=44798"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/44798\/revisions"}],"predecessor-version":[{"id":65793,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/44798\/revisions\/65793"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=44798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=44798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=44798"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=44798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}