{"id":20381,"date":"2014-05-27T15:01:06","date_gmt":"2014-05-27T07:01:06","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=20381"},"modified":"2025-04-04T01:53:36","modified_gmt":"2025-04-03T17:53:36","slug":"cssmodal-build-modals-with-pure-css","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/","title":{"rendered":"Build Modals Using Pure CSS With CSS Modal"},"content":{"rendered":"<p>In the realm of web design, efficient content organization is a must. It not only makes information more readable for users but also enhances the functionality of your website. Achieving this involves designing a clean, well-structured layout. Numerous interface elements and structures are at your disposal for <a href=\"https:\/\/www.hongkiat.com\/blog\/web-mobile-gui-sets\/\">content organization<\/a>, one of which is the modal dialog.<\/p>\n<p>For those who have been using jQuery or other plugins to create modal dialogs, we have exciting news. The CSS Modal library enables you to do the same with just pure CSS.<\/p>\n<p><a href=\"https:\/\/drublic.de\/\">Hans Christian Reinl<\/a>, the developer behind <a href=\"https:\/\/drublic.github.io\/css-modal\/\">CSS Modal<\/a>, has incorporated several beneficial features. Some of its advantages include compatibility as a SASS plugin, cross-browser support, mobile optimization, the ability to incorporate media like images, videos, and sounds, and its compact and speedy nature.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-snippets-for-designers\/\" class=\"ref-block__link\" title=\"Read More: 50 Useful CSS Snippets Every Designer Should Have\" rel=\"bookmark\"><span class=\"screen-reader-text\">50 Useful CSS Snippets Every Designer Should Have<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-snippets-for-designers.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17203 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-snippets-for-designers.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">50 Useful CSS Snippets Every Designer Should Have<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tKeeping pace with the ever-evolving web design trends can be challenging. Web designers and front-end developers are deeply...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>HTML Markup<\/h2>\n<p><strong>CSS Modal<\/strong> has three parts to work with: <strong>header, content and footer<\/strong>. The <code>header<\/code> is where you can put the title for the modal. The content is for displaying the important information you want to highlight. This part supports text, pictures and embedded code. As for the <code>footer<\/code>, you can add additional information here, such as a close button, an open new window button, etc.<\/p>\n<p>To create a modal dialog, you should use the <code>section<\/code> tag and some predefined <code>data-attributes<\/code>, class and id. Inside the <code>section<\/code> tag, an element wrapped with <code>.modal-inner<\/code> class must be included. Here is the basic markup:<\/p>\n<pre>\r\n&lt;section class=\"semantic-content\" id=\"modal-id\" tabindex=\"-1\"\r\nrole=\"dialog\" aria-labelledby=\"modal-label\" aria-hidden=\"true\"&gt;\r\n\r\n&lt;div class=\"modal-inner\"&gt;\r\n&lt;header id=\"modal-label\"&gt;&lt;!-- Header --&gt;&lt;\/header&gt;\r\n&lt;div class=\"modal-content\"&gt;&lt;!-- The modals content --&gt;&lt;\/div&gt;\r\n&lt;footer&gt;&lt;!-- Footer --&gt;&lt;\/footer&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;a href=\"#!\" class=\"modal-close\" title=\"Close this modal\" data-close=\"Close\"\r\ndata-dismiss=\"modal\"&gt;\u00d7&lt;\/a&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<p>The <code>id<\/code> in the <code>section<\/code> tag is used for calling the modal from another function, by a link for example, and the value can be changed as required. <code>a<\/code> tag on the code, will be used as the modal close button. Attribute of the <code>href<\/code> should be left as shown above, as it will stop the page from scrolling to the top when clicked.<\/p>\n<p>The <code>header<\/code> and <code>footer<\/code> are optional parts, which you may (or may not) include. But please keep in mind, if you use a header, you must add in a unique ID name and change the <code>aria-labelledby<\/code> attribute to the same value.<\/p>\n<p>Don\u2019t forget to include the <strong>CSS Modal<\/strong> library, which you can download from its GitHub <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codeload.github.com\/drublic\/css-modal\/legacy.zip\/refs\/tags\/v1.0.4\">page<\/a>, to your project.<\/p>\n<pre>\r\n&lt;head&gt;\r\n..\r\n&lt;link rel=\"stylesheet\" href=\"css\/modal.css\"&gt;\r\n..\r\n&lt;\/head&gt;\r\n<\/pre>\n<h2>Additional Javascript<\/h2>\n<p>There are still some issues when you use CSS Modal with pure CSS, such as:<\/p>\n<ul>\n<li>Keyboard Escape button to exit<\/li>\n<li>Scrolling background prevention<\/li>\n<li>Focus effect to the modal and back to page after closing it<\/li>\n<\/ul>\n<p>So to fix those problems, javascript is still needed here. Fortunately, CSS Modal has provided you with a lightweight javascript <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/drublic\/css-modal\/tree\/master\/modal.js\">source code<\/a> for your convenience. Include this code before your closing <code>body<\/code> tag.<\/p>\n<pre>\r\n&lt;script type=\"text\/javascript\" src='js\/modal.js'&gt;&lt;\/script&gt;\r\n<\/pre>\n<h2>Final Thoughts<\/h2>\n<p>Creating modal with pure CSS still has some drawbacks, but it can become an alternate tool to further enrich your website. And you probably want to try something slightly different. With a little creativity, you could make some pretty awesome modals. Give it a shot.<\/p>","protected":false},"excerpt":{"rendered":"<p>In the realm of web design, efficient content organization is a must. It not only makes information more readable for users but also enhances the functionality of your website. Achieving this involves designing a clean, well-structured layout. Numerous interface elements and structures are at your disposal for content organization, one of which is the modal&hellip;<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,2902],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build Modals Using Pure CSS With CSS Modal - Hongkiat<\/title>\n<meta name=\"description\" content=\"In the realm of web design, efficient content organization is a must. It not only makes information more readable for users but also enhances the\" \/>\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\/cssmodal-build-modals-with-pure-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Modals Using Pure CSS With CSS Modal\" \/>\n<meta property=\"og:description\" content=\"In the realm of web design, efficient content organization is a must. It not only makes information more readable for users but also enhances the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/\" \/>\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=\"2014-05-27T07:01:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:53:36+00:00\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\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.hongkiat.com\\\/blog\\\/cssmodal-build-modals-with-pure-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cssmodal-build-modals-with-pure-css\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Build Modals Using Pure CSS With CSS Modal\",\"datePublished\":\"2014-05-27T07:01:06+00:00\",\"dateModified\":\"2025-04-03T17:53:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cssmodal-build-modals-with-pure-css\\\/\"},\"wordCount\":475,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"CSS Tools\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cssmodal-build-modals-with-pure-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cssmodal-build-modals-with-pure-css\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cssmodal-build-modals-with-pure-css\\\/\",\"name\":\"Build Modals Using Pure CSS With CSS Modal - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2014-05-27T07:01:06+00:00\",\"dateModified\":\"2025-04-03T17:53:36+00:00\",\"description\":\"In the realm of web design, efficient content organization is a must. It not only makes information more readable for users but also enhances the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cssmodal-build-modals-with-pure-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cssmodal-build-modals-with-pure-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cssmodal-build-modals-with-pure-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Modals Using Pure CSS With CSS Modal\"}]},{\"@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\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build Modals Using Pure CSS With CSS Modal - Hongkiat","description":"In the realm of web design, efficient content organization is a must. It not only makes information more readable for users but also enhances the","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\/cssmodal-build-modals-with-pure-css\/","og_locale":"en_US","og_type":"article","og_title":"Build Modals Using Pure CSS With CSS Modal","og_description":"In the realm of web design, efficient content organization is a must. It not only makes information more readable for users but also enhances the","og_url":"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-05-27T07:01:06+00:00","article_modified_time":"2025-04-03T17:53:36+00:00","author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Build Modals Using Pure CSS With CSS Modal","datePublished":"2014-05-27T07:01:06+00:00","dateModified":"2025-04-03T17:53:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/"},"wordCount":475,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","CSS Tools"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/","url":"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/","name":"Build Modals Using Pure CSS With CSS Modal - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2014-05-27T07:01:06+00:00","dateModified":"2025-04-03T17:53:36+00:00","description":"In the realm of web design, efficient content organization is a must. It not only makes information more readable for users but also enhances the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/cssmodal-build-modals-with-pure-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Modals Using Pure CSS With CSS Modal"}]},{"@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\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5iJ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20381","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\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=20381"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20381\/revisions"}],"predecessor-version":[{"id":73693,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20381\/revisions\/73693"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=20381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=20381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=20381"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=20381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}