├── ofice.jpg
├── main.js
├── times-solid.svg
├── index.html
└── css
└── style.css
/ofice.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbubakrDev/Modal_window_js/HEAD/ofice.jpg
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/times-solid.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Modal
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Modal Content
15 |
16 |
18 |
Modal Project
19 |
20 |
21 |
25 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------