├── .gitignore ├── README.md ├── modal-1 ├── index.html └── styles.css ├── modal-2 ├── index.html └── styles.css └── modal-3 ├── index.html └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-modals 2 | 3 | A collection of ready to use modal windows built using CSS. 4 | -------------------------------------------------------------------------------- /modal-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal 1 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 |
19 |
20 |

Modal Window

21 |

22 | You have opened the modal, they are great for confirming actions or 23 | displaying critical information. 24 |

25 |
26 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /modal-1/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | display: grid; 9 | place-items: center; 10 | font-family: Poppins; 11 | background: #37353b; 12 | } 13 | 14 | button { 15 | font-family: inherit; 16 | cursor: pointer; 17 | background: #1a1a1a; 18 | color: #f9f9f9; 19 | border: 0; 20 | border-radius: 8px; 21 | padding: 20px 36px; 22 | font-size: 16px; 23 | } 24 | 25 | @keyframes background-in { 26 | 0% { 27 | scale: 0 0.005; 28 | } 29 | 33% { 30 | scale: 1 0.005; 31 | } 32 | 66%, 33 | 100% { 34 | scale: 1 1; 35 | } 36 | } 37 | 38 | .modal-background { 39 | position: fixed; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | display: grid; 45 | place-items: center; 46 | opacity: 0; 47 | visibility: hidden; 48 | transform: scale(1, 1); 49 | background: rgba(0, 0, 0, 0.5); 50 | transition: 0.5s; 51 | } 52 | 53 | body.open .modal-background { 54 | visibility: visible; 55 | opacity: 1; 56 | animation: background-in 1s both; 57 | } 58 | 59 | @keyframes modal-in { 60 | 0%, 61 | 66% { 62 | opacity: 0; 63 | visibility: hidden; 64 | translate: -50% -30%; 65 | } 66 | 100% { 67 | opacity: 1; 68 | visibility: visible; 69 | } 70 | } 71 | 72 | .modal { 73 | position: fixed; 74 | top: 50%; 75 | left: 50%; 76 | background: #37353b; 77 | color: #f9f9f9; 78 | padding: 48px 40px; 79 | width: 300px; 80 | border-radius: 12px; 81 | translate: -50% -50%; 82 | opacity: 0; 83 | visibility: hidden; 84 | transition: 0.3s; 85 | } 86 | 87 | body.open .modal { 88 | opacity: 1; 89 | visibility: visible; 90 | animation: modal-in 1s; 91 | } 92 | 93 | body.closed .modal { 94 | opacity: 0; 95 | visibility: hidden; 96 | translate: -50% -50%; 97 | } 98 | 99 | h2 { 100 | margin: 0 0 8px; 101 | font-weight: 400; 102 | font-size: 21px; 103 | } 104 | 105 | p { 106 | margin: 0; 107 | color: rgba(255, 255, 255, 0.5); 108 | } 109 | -------------------------------------------------------------------------------- /modal-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal 2 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 | 19 |
20 |
21 |
22 |

Modal Window

23 |

24 | You have opened the modal, they are great for confirming actions or 25 | displaying critical information. 26 |

27 |
28 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /modal-2/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | display: grid; 9 | place-items: center; 10 | font-family: Poppins; 11 | background: #484450; 12 | } 13 | 14 | button { 15 | font-family: inherit; 16 | cursor: pointer; 17 | background: #1a1a1a; 18 | color: #f9f9f9; 19 | border: 0; 20 | border-radius: 8px; 21 | padding: 20px 36px; 22 | font-size: 16px; 23 | } 24 | 25 | .background { 26 | position: fixed; 27 | top: 0; 28 | left: 0; 29 | width: 100%; 30 | height: 100%; 31 | display: grid; 32 | place-items: center; 33 | opacity: 0; 34 | visibility: hidden; 35 | background: rgba(0, 0, 0, 0.25); 36 | } 37 | 38 | body.open .background { 39 | visibility: visible; 40 | opacity: 1; 41 | } 42 | 43 | @keyframes modal-in { 44 | 0% { 45 | translate: -50% 10%; 46 | scale: 0.5; 47 | } 48 | 100% { 49 | opacity: 1; 50 | scale: 1; 51 | visibility: visible; 52 | } 53 | } 54 | 55 | .page-content, 56 | .modal, 57 | .background { 58 | transition: 0.5s; 59 | } 60 | 61 | .modal { 62 | position: fixed; 63 | top: 50%; 64 | left: 50%; 65 | background: #1a1a1a; 66 | color: #f9f9f9; 67 | padding: 48px 40px; 68 | width: 300px; 69 | border-radius: 12px; 70 | translate: -50% -50%; 71 | scale: 1; 72 | opacity: 0; 73 | visibility: hidden; 74 | } 75 | 76 | body.open > .page-content { 77 | scale: 0.75; 78 | } 79 | 80 | body.open .modal { 81 | opacity: 1; 82 | visibility: visible; 83 | animation: modal-in 0.5s; 84 | } 85 | 86 | h2 { 87 | margin: 0 0 8px; 88 | font-weight: 400; 89 | font-size: 21px; 90 | } 91 | 92 | p { 93 | margin: 0; 94 | color: rgba(255, 255, 255, 0.5); 95 | } 96 | -------------------------------------------------------------------------------- /modal-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal 3 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 | 19 |
20 |
21 |
22 |
23 |

Modal Window

24 |

25 | You have opened the modal, they are great for confirming actions or 26 | displaying critical information. 27 |

28 |
29 |
30 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /modal-3/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | display: grid; 9 | place-items: center; 10 | font-family: "Euclid Circular A"; 11 | line-height: 1.5; 12 | background: #24262a; 13 | } 14 | 15 | button { 16 | font-family: inherit; 17 | cursor: pointer; 18 | background: #101012; 19 | color: #f9f9f9; 20 | border: 0; 21 | border-radius: 8px; 22 | padding: 20px 36px; 23 | font-size: 16px; 24 | } 25 | 26 | .background { 27 | position: fixed; 28 | top: 0; 29 | left: 0; 30 | width: 100%; 31 | height: 100%; 32 | display: grid; 33 | place-items: center; 34 | opacity: 0; 35 | visibility: hidden; 36 | background: rgba(0, 0, 0, 0.5); 37 | } 38 | 39 | body.open .background { 40 | visibility: visible; 41 | opacity: 1; 42 | } 43 | 44 | @keyframes modal-in { 45 | 0%, 46 | 50% { 47 | width: 118px; 48 | border-radius: 50%; 49 | } 50 | 55%, 51 | 100% { 52 | right: 50%; 53 | } 54 | 60% { 55 | width: 300px; 56 | border-radius: 12px; 57 | } 58 | 75% { 59 | translate: 50% -50%; 60 | } 61 | } 62 | 63 | .page-content, 64 | .modal, 65 | .background { 66 | transition: 0.5s; 67 | } 68 | 69 | .modal { 70 | position: fixed; 71 | top: 50%; 72 | right: -300px; 73 | translate: 50% -50%; 74 | background: #1d2025; 75 | color: #f9f9f9; 76 | padding: 48px 40px; 77 | width: 300px; 78 | height: 118px; 79 | border-radius: 12px; 80 | } 81 | 82 | @keyframes modal-content-in { 83 | 0%, 84 | 75% { 85 | opacity: 0; 86 | } 87 | 85%, 88 | 100% { 89 | opacity: 1; 90 | } 91 | } 92 | 93 | body.open .modal-content { 94 | animation: modal-content-in 1s both; 95 | } 96 | 97 | body.open > .page-content { 98 | scale: 0.75; 99 | } 100 | 101 | body.open .modal { 102 | animation: modal-in 1s both; 103 | } 104 | 105 | h2 { 106 | margin: 0 0 8px; 107 | font-weight: 400; 108 | font-size: 21px; 109 | } 110 | 111 | p { 112 | margin: 0; 113 | color: rgba(255, 255, 255, 0.5); 114 | } 115 | --------------------------------------------------------------------------------