├── .gitignore ├── README.md ├── base.js ├── css └── modal.css ├── index.html ├── index.js └── plugins └── modal.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Практика JavaScript 2 | https://www.youtube.com/watch?v=FX2fiUvrYP4 3 | 4 | [![Практика JavaScript](https://img.youtube.com/vi/FX2fiUvrYP4/0.jpg)](https://www.youtube.com/watch?v=FX2fiUvrYP4) 5 | -------------------------------------------------------------------------------- /base.js: -------------------------------------------------------------------------------- 1 | const $ = {} 2 | 3 | window.$ = $ 4 | -------------------------------------------------------------------------------- /css/modal.css: -------------------------------------------------------------------------------- 1 | .vmodal {} 2 | 3 | .vmodal.open .modal-overlay, 4 | .vmodal.open .modal-window { 5 | opacity: 1; 6 | z-index: 1000; 7 | } 8 | 9 | .vmodal.hide .modal-overlay, 10 | .vmodal.hide .modal-window { 11 | opacity: 1; 12 | z-index: 1000; 13 | } 14 | 15 | .vmodal.open .modal-window { 16 | transform: translateY(100px); 17 | } 18 | 19 | .vmodal.open .modal-overlay { 20 | background: rgba(0, 0, 0, .5); 21 | } 22 | 23 | .vmodal.hide .modal-window { 24 | transform: translateY(-200px); 25 | } 26 | 27 | .vmodal.hide .modal-overlay { 28 | background: rgba(0, 0, 0, 0); 29 | } 30 | 31 | .modal-window, .modal-overlay { 32 | opacity: 0; 33 | z-index: -1; 34 | } 35 | 36 | .modal-overlay { 37 | position: fixed; 38 | top: 0; 39 | right: 0; 40 | left: 0; 41 | bottom: 0; 42 | background: rgba(0, 0, 0, 0); 43 | transition: background .2s ease-in; 44 | } 45 | 46 | .modal-window { 47 | width: 600px; 48 | border-radius: 5px; 49 | background: #fff; 50 | margin: 0 auto; 51 | transform: translateY(-200px); 52 | transition: transform .2s ease-in; 53 | } 54 | 55 | .modal-header { 56 | padding: 5px 10px; 57 | display: flex; 58 | justify-content: space-between; 59 | border-bottom: 1px solid #eee; 60 | } 61 | 62 | .modal-title { 63 | font-size: 1.5rem; 64 | } 65 | 66 | .modal-close { 67 | cursor: pointer; 68 | } 69 | 70 | .modal-body { 71 | padding: 10px; 72 | } 73 | 74 | .modal-body p { 75 | margin: 0 0 5px; 76 | } 77 | 78 | .modal-footer { 79 | padding: 5px 10px; 80 | border-top: 1px solid #eee; 81 | } 82 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | JS Практика 11 | 12 | 13 | 14 |
15 |

JavaScript Практика

16 | 17 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos est et ex impedit laborum nemo quam, quasi rem soluta. Accusamus ad dolores eveniet iure minima totam voluptatibus. Ab adipisci aliquid animi aspernatur atque beatae consectetur consequuntur corporis culpa cum cumque distinctio dolorem doloremque eveniet fugit id illo incidunt inventore ipsam ipsum itaque labore laudantium natus, neque nesciunt nobis nulla numquam odio officiis qui quia quos similique sint sit tempora vitae, voluptatem. Ad adipisci aperiam asperiores, assumenda cumque delectus ducimus error hic illo incidunt inventore ipsam molestiae necessitatibus neque obcaecati odit pariatur porro qui quos, repellat suscipit tempore voluptatem voluptatibus?

18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | const modal = $.modal() 3 | -------------------------------------------------------------------------------- /plugins/modal.js: -------------------------------------------------------------------------------- 1 | function _createModal(options) { 2 | const modal = document.createElement('div') 3 | modal.classList.add('vmodal') 4 | modal.insertAdjacentHTML('afterbegin', ` 5 |
6 |
7 |
8 | Modal title 9 | × 10 |
11 |
12 |

Lorem ipsum dolor sit.

13 |

Lorem ipsum dolor sit.

14 |
15 |
16 | 17 | 18 |
19 |
20 |
21 | `) 22 | document.body.appendChild(modal) 23 | return modal 24 | } 25 | 26 | /* 27 | * title: string 28 | * closable: boolean 29 | * content: string 30 | * width: string ('400px') 31 | * destroy(): void 32 | * Окно должно закрываться 33 | * -------------- 34 | * setContent(html: string): void | PUBLIC 35 | * onClose(): void 36 | * onOpen(): void 37 | * beforeClose(): boolean 38 | * -------------- 39 | * animate.css 40 | * */ 41 | $.modal = function(options) { 42 | const ANIMATION_SPEED = 200 43 | const $modal = _createModal(options) 44 | let closing = false 45 | 46 | return { 47 | open() { 48 | !closing && $modal.classList.add('open') 49 | }, 50 | close() { 51 | closing = true 52 | $modal.classList.remove('open') 53 | $modal.classList.add('hide') 54 | setTimeout(() => { 55 | $modal.classList.remove('hide') 56 | closing = false 57 | }, ANIMATION_SPEED) 58 | }, 59 | destroy() {} 60 | } 61 | } 62 | --------------------------------------------------------------------------------