Pada kesempatan kali ini saya akan membahas mengenai cara kembangkan box alert dengan HTML CSS dan Javascript. Alert adalah sebuah sebuah pesan yang berisi peringatan atau pemberitahuan aksi sukses. Pada kasus kali ini kita kan belajar membangun kembangkan box alert dengan html dan javascript. Bagaimanacara membuatnya yuk mari disimak strategi berikut ini:Langkah Pertama-tama
Bikin sebuah file html bagi menuliskan code dari struktur html seperti dibawah ini:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Membangun Alert Box Dengan HTML dan Javascript</title>
<link rel=“stylesheet” href=“kembangkan.css”>
</head>
<body>
<a class=“tmbl” onclick=“pop()”>Click Me</a>
<div id=“boxes”>
<i class=“far fa-check-circle”></i>
<h1>Great Job!</h1>
<a class=“far fa-times-circle” onclick=“pop()”></a>
</div>
</body>
</html>
|
di code diatas saya menambahkan icon yang dapat rekan-rekan gunakan dari fontawesome.
Langkah Kedua
ketikkan code style dari CSS agar tampilannya semakin cantik seperti berikut
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
@import “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css”;
body{
margin:0;
padding:0;
}
.tmbl{
position: absolute;
top:50%;
left:50%;
transform: translate(–50%, –50%);
background: #e74c3c;
font–size: 20px;
color:#ffffff;
padding: 10px 30px;
cursor: pointer;
border–radius: 20px;
}
#boxes{
width: 500px;
overflow: hidden;
background: #f1f1f1;
box–shadow: 0 0 20px #3ee681;
border–radius: 10px;
position: absolute;
top:50%;
left:50%;
transform: translate(–50%,–50%);
z–index: 9999;
padding: 10px;
text–align: center;
display: none;
}
#boxes i{
color:#2ecc71;
font–size: 50px;
margin:20px 0;
}
#boxes h1{
color:#333;
}
.fa–times–circle{
font–size: 25px;
color:#f00;
padding: 10px 30px;
cursor: pointer;
position: absolute;
top:0px;
right: –20px;
}
|
Langkah Ketiga
Nah di langkah ini tambahkan code dari javascript yang digunakan :
