{"id":6547,"date":"2024-02-08T09:08:50","date_gmt":"2024-02-08T09:08:50","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=6547"},"modified":"2024-02-08T09:08:53","modified_gmt":"2024-02-08T09:08:53","slug":"responsive-pop-up-box-using-css","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/responsive-pop-up-box-using-css\/","title":{"rendered":"Responsive Pop-Up box using Pure CSS"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"434\" height=\"280\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-2.png\" alt=\"Responsive Pop-Up box using Pure CSS\" class=\"wp-image-6550\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-2.png 434w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-2-300x194.png 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-2-150x97.png 150w\" sizes=\"(max-width: 434px) 100vw, 434px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"697\" height=\"404\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-3.png\" alt=\"Responsive Pop-Up box using Pure CSS\" class=\"wp-image-6551\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-3.png 697w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-3-300x174.png 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-3-150x87.png 150w\" sizes=\"(max-width: 697px) 100vw, 697px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Welcome Developers, to our brand-new tutorial. Today we&#8217;ll be learning How to Create a responsive Pop-up Box Using Pure CSS. If you&#8217;re a beginner you must need to learn CSS effects and use cases.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a Pop-up Box?<\/h2>\n\n\n\n<p>Before diving into implementing the Pop-up box, let&#8217;s understand this terminology. A Pop-up Box is also known as a dialog box, it is a small window that appears after clicking on the button or it provides any kind of information to attract the user&#8217;s attention.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Preview Of Pop-up Box<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/Pure-CSS-Modal-Box-Card-With-HTML-_-Popup-Modal-Card-Google-Chrome-2024-02-05-20-17-14-online-video-cutter.com_.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><a href=\"https:\/\/foolishdeveloper.com\/personal-portfolio-website-using-html-and-css\/\">Personal PortfolioWebsite Using HTML and CSS Source Code<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Code For Pop-up Box<\/h2>\n\n\n\n<p>Create a file name as &#8220;Index.html&#8221; and  add the following code:-<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n&lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n&lt;link rel=\"stylesheet\" href=\"style.css\">\n\n\n &lt;a href=\"#modal-opened\" class=\"link-1\" id=\"modal-closed\">Open Modal&lt;\/a>\n\n&lt;div class=\"container\" id=\"modal-opened\">\n  &lt;div class=\"modal\">\n\n    &lt;div class=\"details\">\n      &lt;h1 class=\"title\">Your Title&lt;\/h1>\n      &lt;p class=\"description\">Slogan will be here at this place.&lt;\/p>\n    &lt;\/div>\n\n    &lt;p class=\"txt\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis ex dicta maiores libero minus obcaecati iste optio, eius labore repellendus.&lt;\/p>\n\n    &lt;button class=\"btn\">Button &amp;rarr;&lt;\/button>\n\n    &lt;a href=\"#modal-closed\" class=\"link-2\">&lt;\/a>\n\n  &lt;\/div>\n&lt;\/div>\n\n<\/pre>\n\n\n\n<p><strong>Below is the HTML Code explanation breakdown:-<\/strong><\/p>\n\n\n\n<p>The Above is a basic HTML structure with meta tags, a link to an external stylesheet, and a modal implemented using a container and a modal div. <\/p>\n\n\n\n<p>The modal is triggered by clicking a hyperlink with the ID <code>modal-closed<\/code> and styled using the styles defined in the linked <code>style.css<\/code> file. <\/p>\n\n\n\n<p>The modal content includes a title, description, text, a button, and a hyperlink for closing the modal.<\/p>\n\n\n\n<p>The `id` name &#8220;modal-closed&#8221; is later used to close the modal when the user clicks on the little cross sign. <\/p>\n\n\n\n<p>Inside the container, there&#8217;s a modal div <code>&lt;div class=\"modal\"&gt;<\/code> that holds the actual modal content.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><a href=\"https:\/\/foolishdeveloper.com\/css-profile-card\/\">52+ CSS Profile Cards<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Code for Pop-up Box<\/h2>\n\n\n\n<p>Create another file name as Index.css and add the following code:- <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">*,\n*::after,\n*::before {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\nhtml {\n  font-size: 62.5%;\n}\nbody {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;\n  min-height: 100vh;\n}\na,\na:link {\n  font-family: inherit;\n  text-decoration: none;\n}\n.container {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 10;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.container:target {\n  display: flex;\n}\n.modal {\n  width: 60rem;\n  padding: 4rem 2rem;\n  border-radius: .0rem;\n  color: hsl(0, 0%, 100%);\n  background: linear-gradient(to right bottom, #009FFF, #ec2F4B);\n  box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);\n  position: relative;\n  overflow: hidden;\n}\n.details {\n  text-align: center;\n  margin-bottom: 4rem;\n  padding-bottom: 4rem;\n  border-bottom: 1px solid hsla(0, 0%, 100%, .4);\n}\n.title {\n  font-size: 3.2rem;\n}\n.description {\n  margin-top: 2rem;\n  font-size: 1.6rem;\n  font-style: normal;\n}\n.txt {\n  padding: 0 4rem;\n  margin-bottom: 4rem;\n  font-size: 1.6rem;\n  line-height: 2;\n}\n.txt::before {\n  content: '';\n  position: absolute;\n  top: 0%;\n  left: 100%;\n  -webkit-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n  width: 18rem;\n  height: 18rem;\n  border: 1px solid hsla(0, 0%, 100%, .2);\n  border-radius: 100rem;\n  pointer-events: none;\n}\n.btn {\n  padding: 1rem 1.6rem;\n  border: 1px solid hsla(0, 0%, 100%, .4);\n  border-radius: 100rem;\n  color: inherit;\n  background: transparent;\n  font-size: 1.4rem;\n  font-family: inherit;\n  letter-spacing: .2rem;\n  transition: .2s;\n  cursor: pointer;\n}\n.btn:hover,\n.btn:focus {\n  border-color: hsla(0, 0%, 100%, .6);\n  -webkit-transform: translateY(-.2rem);\n          transform: translateY(-.2rem);\n}\n.link-1 {\n  font-size: 1.8rem;\n  color: hsl(0, 0%, 100%);\n  background: linear-gradient(to right bottom, #009FFF, #ec2F4B);\n  box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);\n  border-radius: 100rem;\n  padding: 1.4rem 3.2rem;\n  transition: .2s;\n}\n.link-1:hover,\n.link-1:focus {\n  -webkit-transform: translateY(-.2rem);\n          transform: translateY(-.2rem);\n  box-shadow: 0 0 4.4rem .2rem hsla(236, 50%, 50%, 0.4);\n}\n.link-2 {\n  width: 4rem;\n  height: 4rem;\n  border: 1px solid hsla(0, 0%, 100%, .4);\n  border-radius: 100rem;\n  color: inherit;\n  font-size: 2.2rem;\n  position: absolute;\n  top: 2rem;\n  right: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  transition: .2s;\n}\n.link-2::before {\n  content: '\u00d7';\n  -webkit-transform: translateY(-.1rem);\n          transform: translateY(-.1rem);\n}\n.link-2:hover,\n.link-2:focus {\n  border-color: hsla(0, 0%, 100%, .6);\n  -webkit-transform: translateY(-.2rem);\n          transform: translateY(-.2rem);\n}<\/pre>\n\n\n\n<p><strong>Below is the CSS Code Explanation for the Pop-up Box:-<\/strong><\/p>\n\n\n\n<p>The below CSS is used to style the model container with fixed positioning covering the entire viewport. When the container is the target of an anchor link, it sets <code>display: flex<\/code> to show the modal. You must need to learn more about the Flex property in CSS From <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/flex\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 10;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.container:target {\n  display: flex;\n}\n<\/code><\/pre>\n\n\n\n<p>.model class is used to specify the specific width, padding, border-radius, text color, background gradient, and box-shadow.<\/p>\n\n\n\n<p>we&#8217;ve used the pseudo-element for adding the decorative lines.<\/p>\n\n\n\n<p><a href=\"https:\/\/foolishdeveloper.com\/javascript-projects-with-source-code\/\" data-type=\"post\" data-id=\"5921\">30+ Javascript Projects with Source Code<\/a><\/p>\n\n\n\n<p>.btn class will Styles a general button with padding, border, border-radius, text color, transparent background, font size, font family, letter spacing, transition, and cursor.<\/p>\n\n\n\n<p>The CSS styles aim for a clean and visually appealing design with attention to details like gradients, shadows, and transitions for interactive effects.<\/p>\n\n\n\n<p>The modal is set to display when clicking on the anchor link, and various elements within the modal are styled for a cohesive appearance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Code Output<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"434\" height=\"244\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-2-edited.png\" alt=\"Pop-up box\" class=\"wp-image-6555\" style=\"width:418px;height:auto\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-2-edited.png 434w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-2-edited-300x169.png 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/image-2-edited-150x84.png 150w\" sizes=\"(max-width: 434px) 100vw, 434px\" \/><\/figure>\n\n\n\n<p> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Output For Pop-up Box<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/02\/Pure-CSS-Modal-Box-Card-With-HTML-_-Popup-Modal-Card-Google-Chrome-2024-02-05-20-17-14-online-video-cutter.com_-1.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Congratulations!!!  you have just completed Another mini-project for your portfolio that you can use on your next website. This is completely beginner-friendly code. Further, you can modify this as per your needs and ideas. You must do the experiments by adding hovering effects and transition effects and make it more impressive. Also for more such mini projects keep visiting our platform. You can also read about gradient, transition, effects, and shadow effects for interactive in CSS from <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transition\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resources<\/h2>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/a7rarpress\/pen\/abRNZOe\" target=\"_blank\" rel=\"noopener\">Source-Code<\/a><\/p>\n\n\n\n<p>Credit:- <a href=\"https:\/\/codepen.io\/a7rarpress\" target=\"_blank\" rel=\"noopener\">Mohamed Yousef<\/a><\/p>\n\n\n\n<p><strong>HAPPY CODING!!!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Welcome Developers, to our brand-new tutorial. Today we&#8217;ll be learning How to Create a responsive Pop-up Box Using Pure CSS. If you&#8217;re a beginner you must need to learn CSS effects and use cases. What is a Pop-up Box? Before diving into implementing the Pop-up box, let&#8217;s understand this terminology. A Pop-up Box is [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":6599,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[508],"tags":[507],"class_list":["post-6547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pop-up-box","tag-pop-up-box","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/6547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=6547"}],"version-history":[{"count":5,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/6547\/revisions"}],"predecessor-version":[{"id":6600,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/6547\/revisions\/6600"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/6599"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=6547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=6547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=6547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}