Главная » Языки программирования

Примеры модальных окон css

Содержание
  1. 70 CSS Modal Windows
  2. Related Articles
  3. Author
  4. Links
  5. Made with
  6. About a code
  7. Modal Dialog with Backdrop Blur. Only CSS
  8. Author
  9. Links
  10. Made with
  11. About a code
  12. Giant Buttons
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Modal with Scroll and Faded Text
  18. Author
  19. Links
  20. Made with
  21. About a code
  22. Pop-up without JavaScript
  23. Author
  24. Links
  25. Made with
  26. About a code
  27. CSS Window / Modal
  28. Author
  29. Links
  30. Made with
  31. About a code
  32. Details Modal
  33. Author
  34. Links
  35. Made with
  36. About a code
  37. CSS Only Popup
  38. Author
  39. Links
  40. Made with
  41. About a code
  42. Cookies Popup UI Design
  43. Author
  44. Links
  45. Made with
  46. About a code
  47. CSS Modal Using :target Selector
  48. Author
  49. Links
  50. Made with
  51. About a code
  52. Pure CSS Modal — #15
  53. Author
  54. Links
  55. Made with
  56. About a code
  57. CSS-only Modal
  58. Author
  59. Links
  60. Made with
  61. About a code
  62. CSS Modals v2
  63. Author
  64. Links
  65. Made with
  66. About a code
  67. CSS Modal
  68. Author
  69. Links
  70. Made with
  71. About a code
  72. Sign Up Modal
  73. Author
  74. Links
  75. Made with
  76. About the code
  77. CSS Only Popup
  78. Author
  79. Links
  80. Made with
  81. About the code
  82. Material UI Popup
  83. Author
  84. Links
  85. Made with
  86. About the code
  87. Modal
  88. Author
  89. Links
  90. Made with
  91. About the code
  92. Login Modal
  93. Author
  94. Links
  95. Made with
  96. About the code
  97. Fancy Pop-Up
  98. Author
  99. Links
  100. Made with
  101. About the code
  102. Pop-up Design
  103. Author
  104. Links
  105. Made with
  106. About the code
  107. Folding Modal
  108. Author
  109. Links
  110. Made with
  111. About the code
  112. CSS Popup
  113. Author
  114. Links
  115. Made with
  116. About the code
  117. Super Simple Easy Modal
  118. Author
  119. Links
  120. Made with
  121. About the code
  122. CSS Only Popup Animation
  123. Author
  124. Links
  125. Made with
  126. About the code
  127. PopUp Overlay Animation
  128. Author
  129. Links
  130. Made with
  131. About the code
  132. Animate Modal Out From Trigger
  133. Author
  134. Links
  135. Made with
  136. About the code
  137. Super Easy Totally Cool Modal
  138. Author
  139. Links
  140. Made with
  141. About the code
  142. Move Modal In On Path
  143. Author
  144. Links
  145. Made with
  146. About the code
  147. An Onboarding Modal With Vue.js
  148. React Modal UI
  149. HTML5 Dialog Element
  150. JS Simple Modal Box Snippet
  151. Shifting Material Button Modal
  152. Responsive Modal Design
  153. ModalX Animated Modal
  154. Flat Modal Window
  155. Responsive Modal
  156. Simplistic Dialog
  157. No JS Modal Popup Window
  158. Another Modal Box
  159. CSS Only Modal
  160. Flappy Dialog
  161. Modal With Clip-Path
  162. Modal Window
  163. Morph Button To Modal
  164. Modal Popup
  165. Origami Dialog Effect
  166. Author
  167. Links
  168. Made with
  169. About the code
  170. Popup/Overlay
  171. Modal Interaction With Genie Effect
  172. Simple, Flexible And Responsive Flexbox-Based Modal
  173. Animated Modal Box
  174. Modal Dialog
  175. Modal Animation
  176. 3D Dialog
  177. Basic CSS Modal
  178. Modal Window Destroy Concept
  179. Prompt Dialog With Background Blur
  180. Modal Window
  181. Pure CSS Modal
  182. Pure CSS Modal + Slider
  183. Morphing Modal Window
  184. Modal Animation Physics
  185. Swing Out Modal
  186. Push Modal Idea
  187. Pop-Up With Blurred Background Animation
  188. Simple Dialog Effects
  189. CSS Only Line Animated Modal
  190. Pure CSS Animated Modals
  191. Draggable Translucent Modal
  192. Simple Confirmation Popup
Читайте также:  Mobile apps with html

70 CSS Modal Windows

Collection of HTML and CSS modal window code examples from CodePen, GitHub, and other resources. Update of February 2021 collection. Six new items.

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Giant Buttons

Author

Made with

About a code

Giant Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Modal with Scroll and Faded Text

Author

Made with

About a code

Modal with Scroll and Faded Text

A simple way to create a modal that never exceed the viewport’s height and allows for scroll inside.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pop-up without JavaScript

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Window / Modal

Author

Made with

About a code

CSS Window / Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Details Modal

By nesting a modal inside a details element it is automaticly shown when the details is opened. And by nesting the overlay inside the summary element, we can use that to trigger a close.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Only Popup

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Cookies Popup UI Design

Author

Made with

About a code

Cookies Popup UI Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Modal Using :target Selector

This example shows how to open a modal window using HTML and CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Modal — #15

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS-only Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Modals v2

The second version of my previous pen(CSS Modal). In this one, I showed that there are three different modals with their own unique ids and I am using different links to open and close them.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Sign Up Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

CSS Only Popup

Simple popup in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Material UI Popup

Easing is not easy! However, with the right easing from the Material Design guidelines, you get punchy and snappy animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Basic CSS-only modal window.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Login Modal

Modal login form in HTML, CSS and JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Fancy Pop-Up

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Pop-up Design

Author

Made with

About the code

Pop-up Design

Pure CSS pop-up design with animation.

Author

Made with

About the code

Folding Modal

Folding modal window with HTML, CSS and JS.

Demo image: CSS Popup

Author

Made with

About the code

CSS Popup

Demo image: Super Simple Easy Modal

Author

Made with

About the code

Super Simple Easy Modal

Super simple easy modal with ES6.

Demo Image: CSS Only Popup Animation

Author

Made with

About the code

CSS Only Popup Animation

HTML and CSS popup animation.

Author

Made with

About the code

Popup overlay using HTML and CSS and JavaScript.

Author

Made with

About the code

Animate Modal Out From Trigger

Animate modal out from trigger with popmotion.js.

Demo Image: Super Easy Totally Cool Modal

Author

Made with

About the code

Super Easy Totally Cool Modal

Only CSS super easy totally cool modal window.

Demo Image: Move Modal In on Path

Author

Made with

About the code

Move Modal In On Path

Move modal windows in on path with HTML, CSS and JavaScript.

Demo Image: An Onboarding Modal With Vue.js

Author

Made with

About the code

An Onboarding Modal With Vue.js

Step through on-boarding (or whatever, really) screens in a modal horizontally or vertically.

Demo Image: React Modal UI

React Modal UI

Modal UI with HTML, CSS and React.js.
Made by Mike
February 8, 2017

Demo Image: HTML5 Dialog Element

HTML5 Dialog Element

Messing around with HTML5’s dialog element.
Made by Andreas J. Virkus
January 31, 2017

Demo Image: JS Simple Modal Box Snippet

JS Simple Modal Box Snippet

Simple modal box snippet in HTML, CSS and JavaScript.
Made by Tobias Bogliolo
November 5, 2016

Demo Image: Shifting Material Button Modal

Shifting Material Button Modal

Two call-to-action buttons that give context to your modals in a Material Design fashion.
Made by Ettrics
October 8, 2016

Demo Image: Responsive Modal Design

Responsive Modal Design

Material Design inspired modals. No jQuery required. Responsive.
Made by Ettrics
October 8, 2016

Demo Image: ModalX Animated Modal

ModalX Animated Modal

Animated modal window with HTML, CSS and JavaScript.
Made by Christopher Bicudo
July 28, 2016

Demo Image: Flat Modal Window

Flat Modal Window

Flat modal window with HTML, CSS and JavaScript.
Made by Dronca Raul
July 15, 2016

Demo Image: Responsive Modal

Responsive Modal

Simple responsive modal with HTML, CSS and JavaScript.
Made by Nainoa Shizuru
July 11, 2016

Demo Image: Simplistic Dialog

Simplistic Dialog

Simplistic dialog with HTML, CSS and JavaScript.
Made by Tristan White
July 9, 2016

Demo Image: No JS Modal Popup Window

No JS Modal Popup Window

Using the ol’ label, checkbox trick to launch a modal window. All CSS. No JavaScript required.
Made by David Conner
July 6, 2016

Demo Image: Another Modal Box

Another Modal Box

Yet another modal box!
Made by Valentine
June 29, 2016

Demo Image: CSS Only Modal

CSS Only Modal

A challenge to create a confirm modal without any JavaScript. Probably not usable in production, but still it works.
Made by Kristoffer Östlund
May 1, 2016

Demo Image: Flappy Dialog

Flappy Dialog

HTML, CSS and JavaScript flappy dialog.
Made by Alex
April 15, 2016

Demo Image: Modal With Clip-Path

Modal that animate opens with animation clip-path. Observe clip-path aren’t hardware accelerated or works in IE anything.
Made by Jonas Sandstedt
April 14, 2016

Demo Image: Modal Window

Modal window with HTML, CSS and JavaScript.
Made by Ophelia Fournier-Laflamme
April 14, 2016

Demo Image: Morph Button To Modal

Morph Button To Modal

Morph button to modal with React.js
Made by Kyle J. Kress
March 23, 2016

Demo Image: Modal Popup

HTML, CSS and JavaScript modal window.
Made by Nastasia
March 23, 2016

Demo Image: Origami Dialog Effect

Origami Dialog Effect

The idea is to replace the path of the button container into origami path step by step.
Made by Bhakti Al Akbar
March 4, 2016

Demo Image: Popup / Overlay

Author

Made with

About the code

Popup/Overlay window in HTMl, CSS and JS.

Demo Image: Modal Interaction With Genie Effect

Inspired by Mac OS X minimize interaction. Built with SVG and Greensock plugin.
Made by Bhakti Al Akbar
March 4, 2016

Demo Image: Simple, Flexible And Responsive Flexbox-Based Modal

Simple, Flexible And Responsive Flexbox-Based Modal

Flexbox modal example. It’s responsive, easy to integrate and extend, and passes content anattributes. Was looking for a simple approach that was not reliant on any library. Straight CSS/jQuery.
Made by Bryan Chalker
March 1, 2016

Demo Image: Animated Modal Box

Animated Modal Box

HTML, CSS and JavaScript animated modal box.
Made by lefoy
February 21, 2016

Demo Image: Modal Dialog

Simple modal window equipped with smooth CSS3 transitions. Commonly used for viewing annoyingly important content upon visiting a website.
Made by David Fitas
January 21, 2016

Demo Image: Modal Animation

Modal animation with HTML, CSS and JavaScript.
Made by Giana
January 16, 2016

Demo Image: 3D Dialog

3D Dialog

3D modal dialog window in HTML/CSS and JavaScript.
Made by Geza Dombi
December 2, 2015

Demo Image: Basic CSS Modal

Basic CSS Modal

Basic modal window with HTML and CSS.
Made by Timothy Long
December 2, 2015

Demo Image: Modal Window Destroy Concept

Modal window destroy concept with HTML, CSS and JavaScript.
Made by LegoMushroom
November 24, 2015

Demo Image: Prompt Dialog With Background Blur

Prompt Dialog With Background Blur

Purely CSS-driven popup dialog with a soothing transition animation and background blur.
Made by Tuomas Hatakka
September 28, 2015

Demo Image: Modal Window

Modal window with HTML, CSS and JavaScript.
Made by Philipp Rappold
August 2, 2015

Demo Image: Pure CSS Modal

Pure CSS Modal

HTML and CSS modal window.
Made by Mark Holmes
June 25, 2015

Demo Image: Pure CSS Modal + Slider

Pure CSS Modal + Slider

Responsive modal dialog using css only, including sliding/carousel content inside the modal.
Made by Marvin Orendain
June 23, 2015

Demo Image: Morphing Modal Window

Morphing Modal Window

A call-to-action button that animates and turns into a full-size modal window. The final result is powered by a combination of CSS transition and transformations, jQuery and Velocity.js.
Made by CodyHouse
March 12, 2015

Demo Image: Modal Animation Physics

Messing around with keyframe/transition physics for a modal. Mostly focused on the timing between the overlay, modal container, and modal content to try to make the whole event look more organic. Believe it or not, inspired by the menu pop-ups in Super Mario 3D.
Made by Tey Tag
February 18, 2015

Demo Image: Swing Out Modal

Swing Out Modal

Fun little modal concept with HTML and CSS.
Made by Michael Smith
February 17, 2015

Demo Image: Push Modal Idea

Push Modal Idea

Neat little way to give your page some depth.
Made by Short
February 4, 2015

Demo Image: Pop-Up With Blurred Background Animation

Pop-Up With Blurred Background Animation

Here’s a popup that appears while blurring out the body underneath. click the ‘X’ close on the popup and the blur transition back while the popup fades off. Suitable for sites that may want a nag (perhaps for donation or subscription services) or could be re-purposed as a general modal or lightbox. Uses CSS3 Filter (for blur) and CSS3 Animation for blur transitions. The jQuery is minimal in this iteration, simply used to fade in the pop-up and add and remove the CSS3 classes for blurring.
Made by Benjamin Dalton
December 31, 2014

Demo Image: Simple Dialog Effects

Simple Dialog Effects

Simple dialog effects in HTML, CSS and JavaScript.
Made by dodozhang21
December 29, 2014

Demo Image: CSS Only Line Animated Modal

CSS Only Line Animated Modal

Modal draws then fades in using SVG & CSS animation.
Made by Tom
December 22, 2014

Demo Image: Pure CSS Animated Modals

Pure CSS Animated Modals

Animated slide down modal with browser back support. No JS animated slide down modal with tabs. No JS.
Made by Tom
December 8, 2014

Demo Image: Draggable Translucent Modal

Draggable Translucent Modal

Draggable translucent modal with HTML, CSS and JavaScript.
Made by Jesse Couch
September 24, 2014

Demo Image: Simple Confirmation Popup

Simple Confirmation Popup

Simple responsive confirmation dialog box, with a subtle CSS3 entry animation.
Made by Adventures in Missions
July 2, 2014

Источник

Оцените статью
© 2024 Программирование