├── README.md
├── index.js
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # POP_UP-using-html-css-js
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const openBtn = document.getElementById("openBtn");
2 | const closeBtn = document.getElementById("closeBtn");
3 | const pop = document.getElementById("pop");
4 |
5 |
6 | openBtn.onclick = function () {
7 | pop.style.display = "block";
8 | }
9 |
10 | closeBtn.onclick = function () {
11 | pop.style.display = "none";
12 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | popup
8 |
9 |
10 |
11 |
12 | Open Modal
13 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: sans-serif;
6 | }
7 |
8 | .container {
9 | display: grid;
10 | place-items: center;
11 | min-height: 100vh;
12 | background-color: #000000;
13 | }
14 |
15 | .openModalBtn {
16 | border: none;
17 | outline: none;
18 | background-color: #fff;
19 | padding: 12px 20px;
20 | border-radius: 8px;
21 | font-size: 18px;
22 | font-weight: 700;
23 | cursor: pointer;
24 |
25 | }
26 |
27 | .popup {
28 | background-color: #fff;
29 | width: 300px;
30 | min-width: 70vw;
31 | border-radius: 15px;
32 | padding: 20px;
33 | text-align: center;
34 | position: absolute;
35 | top: 50%;
36 | left: 50%;
37 | display: none;
38 |
39 | }
40 |
41 | .popup p {
42 | padding-block: 10px;
43 | }
44 |
45 | .closeModalBtn {
46 | background-color: aqua;
47 | color: #fff;
48 | border: none;
49 | border-radius: 8px;
50 | padding: 10px 16px;
51 | margin-top: 10px;
52 | cursor: pointer;
53 | }
54 |
55 | @media screen and (max-width:340px) {
56 | .popup {
57 | max-width: 50vw;
58 | }
59 | }
--------------------------------------------------------------------------------