{"id":1796,"date":"2016-09-01T16:23:29","date_gmt":"2016-09-01T16:23:29","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1796"},"modified":"2022-03-04T07:33:23","modified_gmt":"2022-03-04T07:33:23","slug":"simple-modal-popup-javascript-css","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/","title":{"rendered":"Create Simple Modal Popup using JavaScript and CSS"},"content":{"rendered":"<p>A modal is a dialog box or popup, displayed over the current web page. A model popup helps to display additional information without reloading the page. The user can view the relative information on the popup box on the same page which provides a better user experience. <\/p>\n<p>There are various plugins are available to implement modal popup on the web page using jQuery. But if you want to use your own modal popup without using any third-party jQuery plugins, this example script helps you to make a simple <b>modal popup using JavaScript<\/b> and CSS. This modal popup will less impact page load time than the jQuery plugin. We&#8217;ll use JavaScript and CSS to create this simple popup and you can easily integrate this modal popup to the web page.<\/p>\n<h2>Modal HTML<\/h2>\n<p>Define HTML elements to create a modal wrapper and content area in the web page.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Add an anchor link to trigger modal to open popup and modal box content.<\/li>\n<li>In the modal popup, a close icon is placed that helps to close the modal.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Link to trigger modal --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"javascript:void(0);\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mpopupLink\"<\/span>&gt;<\/span>Launch Modal Popup<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Modal popup box --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mpopupBox\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mpopup\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Modal content --&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-content\"<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-header\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"close\"<\/span>&gt;<\/span>\u00d7<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">span<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h2<\/span>&gt;<\/span>Simple Modal Popup<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h2<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-body\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>This is a modal popup created with JavaScript and CSS<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>Insert content here...<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-footer\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"button\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-primary\"<\/span>&gt;<\/span>Save changes<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<h2>JavaScript<\/h2>\n<p>The following JavaScript code is used to open and close the modal on clicking the trigger link.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><b>JavaScript onclick()<\/b> event is used to handle the click event.<\/li>\n<\/ul>\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>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Select modal<\/span>\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> mpopup = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'mpopupBox'<\/span>);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Select trigger link<\/span>\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> mpLink = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"mpopupLink\"<\/span>);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Select close action element<\/span>\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> close = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementsByClassName(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"close\"<\/span>)[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>];\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Open modal once the link is clicked<\/span>\r\nmpLink.onclick = <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    mpopup.style.display = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"block\"<\/span>;\r\n};\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Close modal once close element is clicked<\/span>\r\nclose.onclick = <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    mpopup.style.display = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"none\"<\/span>;\r\n};\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Close modal when user clicks outside of the modal box<\/span>\r\n<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.onclick = <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">event<\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (event.target == mpopup) {\r\n        mpopup.style.display = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"none\"<\/span>;\r\n    }\r\n};<\/span>\r\n<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><span class=\"note\">Note that:<\/span> Add this JavaScript after the HTML code. Also, follow the comment lines to understand the JavaScript code functionality. <\/p>\n<h2>CSS<\/h2>\n<p>The CSS is used to style the modal popup, box content, close button, and animation effects.<\/p>\n<pre style=\"color: rgb(0, 0, 0);\"><span class=\"hljs-selector-class\">.mpopup<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">display<\/span>: none;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">position<\/span>: fixed;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">z-index<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">1<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">padding-top<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">100px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">left<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">top<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">width<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">100%<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">height<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">100%<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">overflow<\/span>: auto;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">background-color<\/span>: <span class=\"hljs-built_in\" style=\"color: green;\">rgb<\/span>(0,0,0);\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">background-color<\/span>: <span class=\"hljs-built_in\" style=\"color: green;\">rgba<\/span>(0,0,0,0.4);\r\n}\r\n<span class=\"hljs-selector-class\">.modal-content<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">position<\/span>: relative;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">background-color<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">#fff<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">margin<\/span>: auto;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">padding<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">width<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">450px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">box-shadow<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0<\/span> <span class=\"hljs-number\" style=\"color: navy;\">4px<\/span> <span class=\"hljs-number\" style=\"color: navy;\">8px<\/span> <span class=\"hljs-number\" style=\"color: navy;\">0<\/span> <span class=\"hljs-built_in\" style=\"color: green;\">rgba<\/span>(0,0,0,0.2),<span class=\"hljs-number\" style=\"color: navy;\">0<\/span> <span class=\"hljs-number\" style=\"color: navy;\">6px<\/span> <span class=\"hljs-number\" style=\"color: navy;\">20px<\/span> <span class=\"hljs-number\" style=\"color: navy;\">0<\/span> <span class=\"hljs-built_in\" style=\"color: green;\">rgba<\/span>(0,0,0,0.19);\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">-webkit-animation-name<\/span>: animatetop;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">-webkit-animation-duration<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0.4s<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">animation-name<\/span>: animatetop;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">animation-duration<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0.4s<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">border-radius<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0.3rem<\/span>;\r\n}\r\n<span class=\"hljs-selector-class\">.modal-header<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">padding<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">2px<\/span> <span class=\"hljs-number\" style=\"color: navy;\">12px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">background-color<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">#ffffff<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">color<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">#333<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">border-bottom<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">1px<\/span> solid <span class=\"hljs-number\" style=\"color: navy;\">#e9ecef<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">border-top-left-radius<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0.3rem<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">border-top-right-radius<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0.3rem<\/span>;\r\n}\r\n<span class=\"hljs-selector-class\">.modal-header<\/span> <span class=\"hljs-selector-tag\" style=\"color: olive;\">h2<\/span>{\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">font-size<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">1.25rem<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">margin-top<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">14px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">margin-bottom<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">14px<\/span>;\r\n}\r\n<span class=\"hljs-selector-class\">.modal-body<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">padding<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">2px<\/span> <span class=\"hljs-number\" style=\"color: navy;\">12px<\/span>;\r\n}\r\n<span class=\"hljs-selector-class\">.modal-footer<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">padding<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">1rem<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">background-color<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">#ffffff<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">color<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">#333<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">border-top<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">1px<\/span> solid <span class=\"hljs-number\" style=\"color: navy;\">#e9ecef<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">border-bottom-left-radius<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0.3rem<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">border-bottom-right-radius<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">0.3rem<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">text-align<\/span>: right;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.close<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">color<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">#888<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">float<\/span>: right;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">font-size<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">28px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">font-weight<\/span>: bold;\r\n}\r\n<span class=\"hljs-selector-class\">.close<\/span><span class=\"hljs-selector-pseudo\" style=\"color: green;\">:hover<\/span>, <span class=\"hljs-selector-class\">.close<\/span><span class=\"hljs-selector-pseudo\" style=\"color: green;\">:focus<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">color<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">#000<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">text-decoration<\/span>: none;\r\n    <span class=\"hljs-attribute\" style=\"color: maroon;\">cursor<\/span>: pointer;\r\n}\r\n\r\n<span class=\"hljs-comment\" style=\"color: green;\">\/* add animation effects *\/<\/span>\r\n@-<span class=\"hljs-keyword\" style=\"color: olive;\">webkit<\/span>-<span class=\"hljs-keyword\" style=\"color: olive;\">keyframes<\/span> animatetop {\r\n    <span class=\"hljs-selector-tag\" style=\"color: olive;\">from<\/span> {<span class=\"hljs-attribute\" style=\"color: maroon;\">top<\/span>:-<span class=\"hljs-number\" style=\"color: navy;\">300px<\/span>; <span class=\"hljs-attribute\" style=\"color: maroon;\">opacity<\/span>:<span class=\"hljs-number\" style=\"color: navy;\">0<\/span>}\r\n    <span class=\"hljs-selector-tag\" style=\"color: olive;\">to<\/span> {<span class=\"hljs-attribute\" style=\"color: maroon;\">top<\/span>:<span class=\"hljs-number\" style=\"color: navy;\">0<\/span>; <span class=\"hljs-attribute\" style=\"color: maroon;\">opacity<\/span>:<span class=\"hljs-number\" style=\"color: navy;\">1<\/span>}\r\n}\r\n\r\n@<span class=\"hljs-keyword\" style=\"color: olive;\">keyframes<\/span> animatetop {\r\n    <span class=\"hljs-selector-tag\" style=\"color: olive;\">from<\/span> {<span class=\"hljs-attribute\" style=\"color: maroon;\">top<\/span>:-<span class=\"hljs-number\" style=\"color: navy;\">300px<\/span>; <span class=\"hljs-attribute\" style=\"color: maroon;\">opacity<\/span>:<span class=\"hljs-number\" style=\"color: navy;\">0<\/span>}\r\n    <span class=\"hljs-selector-tag\" style=\"color: olive;\">to<\/span> {<span class=\"hljs-attribute\" style=\"color: maroon;\">top<\/span>:<span class=\"hljs-number\" style=\"color: navy;\">0<\/span>; <span class=\"hljs-attribute\" style=\"color: maroon;\">opacity<\/span>:<span class=\"hljs-number\" style=\"color: navy;\">1<\/span>}\r\n}<\/pre>\n<h2>Conclusion<\/h2>\n<p>This sample script will help you to create a custom popup and you can easily create a simple <b>modal popup with CSS<\/b> and JavaScript. The CSS can be customized to make the modal style compatibility the website UI. For example, we have added only text content in the modal box. You can customize to add HTML form elements or dynamic content in the modal popup.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A modal is a dialog box or popup, displayed over the current web page. A model popup helps to display additional information without reloading the page. The user can view the relative information on the <\/p>\n","protected":false},"author":1,"featured_media":4876,"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":[124,66,339,126],"class_list":["post-1796","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-css","tag-javascript","tag-modal","tag-popup","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>Create Simple Modal Popup using JavaScript and CSS - CodexWorld<\/title>\n<meta name=\"description\" content=\"Modal Popup with CSS and JavaScript - Step-by-step guide to creating a simple Popup using JavaScript and CSS. Sample code on how to create a modal popup.\" \/>\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\/simple-modal-popup-javascript-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Simple Modal Popup using JavaScript and CSS - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Modal Popup with CSS and JavaScript - Step-by-step guide to creating a simple Popup using JavaScript and CSS. Sample code on how to create a modal popup.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/\" \/>\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=\"2016-09-01T16:23:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-04T07:33:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/09\/create-modal-popup-using-javascript-css-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\\\/simple-modal-popup-javascript-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Create Simple Modal Popup using JavaScript and CSS\",\"datePublished\":\"2016-09-01T16:23:29+00:00\",\"dateModified\":\"2022-03-04T07:33:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/\"},\"wordCount\":315,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/create-modal-popup-using-javascript-css-codexworld.png\",\"keywords\":[\"CSS\",\"JavaScript\",\"Modal\",\"Popup\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/\",\"name\":\"Create Simple Modal Popup using JavaScript and CSS - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/create-modal-popup-using-javascript-css-codexworld.png\",\"datePublished\":\"2016-09-01T16:23:29+00:00\",\"dateModified\":\"2022-03-04T07:33:23+00:00\",\"description\":\"Modal Popup with CSS and JavaScript - Step-by-step guide to creating a simple Popup using JavaScript and CSS. Sample code on how to create a modal popup.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/create-modal-popup-using-javascript-css-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/create-modal-popup-using-javascript-css-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"create-modal-popup-using-javascript-css-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/simple-modal-popup-javascript-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Simple Modal Popup using JavaScript and CSS\"}]},{\"@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":"Create Simple Modal Popup using JavaScript and CSS - CodexWorld","description":"Modal Popup with CSS and JavaScript - Step-by-step guide to creating a simple Popup using JavaScript and CSS. Sample code on how to create a modal popup.","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\/simple-modal-popup-javascript-css\/","og_locale":"en_US","og_type":"article","og_title":"Create Simple Modal Popup using JavaScript and CSS - CodexWorld","og_description":"Modal Popup with CSS and JavaScript - Step-by-step guide to creating a simple Popup using JavaScript and CSS. Sample code on how to create a modal popup.","og_url":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-09-01T16:23:29+00:00","article_modified_time":"2022-03-04T07:33:23+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/09\/create-modal-popup-using-javascript-css-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\/simple-modal-popup-javascript-css\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Create Simple Modal Popup using JavaScript and CSS","datePublished":"2016-09-01T16:23:29+00:00","dateModified":"2022-03-04T07:33:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/"},"wordCount":315,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/09\/create-modal-popup-using-javascript-css-codexworld.png","keywords":["CSS","JavaScript","Modal","Popup"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/","url":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/","name":"Create Simple Modal Popup using JavaScript and CSS - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/09\/create-modal-popup-using-javascript-css-codexworld.png","datePublished":"2016-09-01T16:23:29+00:00","dateModified":"2022-03-04T07:33:23+00:00","description":"Modal Popup with CSS and JavaScript - Step-by-step guide to creating a simple Popup using JavaScript and CSS. Sample code on how to create a modal popup.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/09\/create-modal-popup-using-javascript-css-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/09\/create-modal-popup-using-javascript-css-codexworld.png","width":1366,"height":768,"caption":"create-modal-popup-using-javascript-css-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/simple-modal-popup-javascript-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Create Simple Modal Popup using JavaScript and CSS"}]},{"@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\/2016\/09\/create-modal-popup-using-javascript-css-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-sY","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1796","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=1796"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1796\/revisions"}],"predecessor-version":[{"id":4874,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1796\/revisions\/4874"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/4876"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}