CSS Modal Window - HTML and CSS Responsive Popup box creation with CSS Flexbox

CSS Popup/Modal Window - HTML and CSS Responsive Popup box creation with CSS Flexbox

We will be creating a css modal window using pure css withou JavaS cript. Creating a mobile first responsive modal window with css is quite easy and it doesn't need you to understand javascript or jquery. We are simply using css :target pseudo selector to create our popup box.

CSS MODAL Window - SOURCE CODE

Here's What You Will Learn:

First of all, you need to understand that a css modal window can be used as css popup box, css modal dialog, css modal box, css popup or css lightbox etc. interchangeably.

You will learn how to properly write the HTML structure for your responsive CSS popup modal window using the BEM (block elements, modifiers) principles to create a CSS modal window component which is reusable, scalable and easily maintainable.

We are also going to add an animation to the css popup/modal box that we will be creating in this video.

Finally, we will just go ahead and create a link using anchor tag that will work as a button which we will be using for the triggering the popup window. So we simply create an ID for the modal wrapper element and then we'll target that modal wrapper with that ID by using it as a href attribute value for our anchor element. .i.e. button.

===============NAVIGATE TO QUICK PARTS ===============

1:05 Creating HTML5 Structure for Modal Box

6:18 Writing CSS Styles for the Popup Box

20:00 Adding an animation to the Modal window with CSS
=====================================================

If you have any questions, just comment below in comment section. I will try to respond as soon as possible.

Like, share and comment!
Thanks

============Useful Tutorials=============

Writing HTML and CSS Faster using Emmet

Flexbox based Responsive Image Gallery

Responsive Image Gallery using HTML5 and CSS3 - Part - 1

Responsive Image Gallery Using HTML5 and CSS3 - Part - 2

Distributing images evenly in a fluid container

Creating CSS3 Tooltip without using jquery or javascript

Styling placeholder text using css3

Creating three column responsive layout

How to create simple css3 preloading animation

************************CONTACT and RESOURCES*************

Find all the source codes here:

Follow on Twitter

Add on Facebook

Like Page on Facebook

[amirkhan-dbcf]

i suggest every one watch this tutorial for popup in html and with out JavaScript thank u sir good job

[janicemedina]

Thank you for also including demonstrating Emmet!

[achyutsrivastava]

hey can you align the text to image side by side. I search the net but couldn't find anything. :(. I would be grateful if you will help me out.

[vkendal]

very useful. thank you for your video, smasher.

[alixedesigner]

Hi thanks so much, that can use it without click bouton

[GunnzaEIR]

Good tutorial but how come you missed out in a very important part in explaining the *::after * * ::before code