├── css └── style.css ├── index.html ├── main.js ├── ofice.jpg └── times-solid.svg /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | background-image: url(../ofice.jpg); 13 | background-repeat: no-repeat; 14 | background-size: 100% 100%; 15 | font-family: serif; 16 | } 17 | 18 | .big { 19 | display: none; 20 | height: 100%; 21 | width: 100%; 22 | background-color: rgba(7, 7, 255, 0.5); 23 | } 24 | 25 | .content{ 26 | background-color: white; 27 | width: 35rem; 28 | height: 17rem; 29 | margin-left: 34%; 30 | margin-top: 18%; 31 | } 32 | 33 | .btn{ 34 | border: none; 35 | background:none; 36 | margin-left: 88%; 37 | cursor: pointer; 38 | } 39 | 40 | .btn ion-icon{ 41 | font-size: 60px; 42 | color:red; 43 | } 44 | 45 | .text{ 46 | font-size: 50px; 47 | margin-left: 22%; 48 | margin-top: 7%; 49 | } 50 | 51 | .project { 52 | background-color: white; 53 | width: 35rem; 54 | height: 17rem; 55 | } 56 | 57 | .text2 { 58 | margin-left: 5rem; 59 | margin-top: 3rem; 60 | font-size: 65px; 61 | } 62 | 63 | .btn2 { 64 | background-color: deepskyblue; 65 | padding: 15px; 66 | border: none; 67 | border-radius: 10px; 68 | margin-left: 13rem; 69 | margin-top: 3rem; 70 | color: white; 71 | cursor: pointer; 72 | } 73 | 74 | .btn2:hover{ 75 | border:2px solid deepskyblue; 76 | background: none; 77 | color: deepskyblue; 78 | } 79 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Modal Content

15 |
16 |
17 |
18 |

Modal Project

19 | 20 |
21 | 25 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | let big = document.querySelector('.big') 2 | let content = document.querySelector('.content') 3 | let btn = document.querySelector('.btn') 4 | let btn2 = document.querySelector('.btn2') 5 | let project = document.querySelector('.project') 6 | 7 | btn2.addEventListener('click' , display) 8 | 9 | function display (){ 10 | project.style.display = 'none' 11 | big.style.display = 'block' 12 | } 13 | 14 | btn.addEventListener('click' , display2) 15 | 16 | function display2(){ 17 | project.style.display = 'block' 18 | big.style.display = 'none' 19 | } -------------------------------------------------------------------------------- /ofice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbubakrDev/Modal_window_js/4de47dabb132484853f5e436a58d8699ba800c12/ofice.jpg -------------------------------------------------------------------------------- /times-solid.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------