membuat alert javascript

Cara Membuat Alert JavaScript Sederhana Dengan CSS

by

Halo semuanya pada artikel alafgani.web.id kali ini kita akan Membuat Alert JavaScript Dengan CSS,  Alert dalam JavaScript digunakan untuk menampilkan kotak peringatan atau notifikasi. Alert ini seperti kotak dialog pesan yang memberitahu pengunjung website.

Contohnya, Misalkan seorang pengunjung mengisi formulir di mana beberapa isian wajib diperlukan untuk memasukkan beberapa isian, tetapi pengunjung lupa untuk memberikan input. oleh karena itu, kita dapat menggunakan kotak dialog alert untuk menampilkan pesan peringatan terkait pengisian textfield.

Bagaimana cara membuat alert? langsung saja kita simak caranya yuk.

Baca Juga : Cara Membuat Banner Slider HTML dan JavaScript

Membuat Alert Sederhana

Contoh 1

Buatlah sebuah file index.html , style.css dan javascript.js yang sudah disiapkan di dalam satu folder. jika sudah dibuat maka tuliskan syntax dibawah ini:

Index.html

<button>Click Disini</button>

Style.css

html {
text-align: center;
padding-top: 1em;
background: #f4f4f4;
}

button {
padding: 1em 1.2em;
background: #eb6ba0;
color: white;
font-size: 20px;
border-radius: .3em;
border: none;
border-bottom: 4px solid #aa4b72;
cursor: pointer;
}

Javascript.js

/* Selecting DOM element */
const button = document.querySelector("button");

/* Callback function */
function alertButton() {
alert('Hi Sahabat alafgani.web.id');
}

/* Event listener */
button.addEventListener("click", alertButton, false);

Hasil Alert

Jika sudah jalankan index.html di Browser, Maka hasilnya akan seperti ini:

membuat alert javascript

Klik pada Tombol “Click Disini” nanti akan ada notifikasi seperti ini:

membuat alert javascript

Contoh 2

Berbeda dengan contoh 1, ini adalah jenis alert modal pop up yang dibuat dengan sederhana, langsung saja kita lihat syntax Membuat Alert JavaScript:

Index.html

<div class="modalView" id="modalView">
<div id="modalView__closeBtn"></div>
<div class="modalView__content centered">
<!-- <h1>THIS IS A TITLE</h1> -->
<p>Salam kenal semuanya.</p>
<p>INI ADALAH MODAL POP UP YA.</p>
</div>
</div>

Style.css

* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
background: #e9e7df;
}

.modalView {
width: 300px;
position: absolute;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
left: 50%;
background:black;
transform: translate(-50%, -50%);
padding: 20px 20px;
font-size: 1.2rem;
-webkit-box-shadow: -1px 2px 30px -8px rgba(0, 0, 0, 0.62);
-moz-box-shadow: -1px 2px 30px -8px rgba(0, 0, 0, 0.62);
box-shadow: -1px 2px 30px -8px rgba(0, 0, 0, 0.62);
}

.modalView > .modalView__content {
color: white;
font-weight: bold;
}
.modalView > .modalView__content.centered {
text-align: center;
}

.modalView__content h1 {
font-size: 1.5rem;
padding-bottom: 10px;
}
.modalView__content p {
font-size: 1rem;
}

#modalView__closeBtn {
position: absolute;
background: #000000;
width: 35px;
border-radius: 35px;
height: 35px;
right: -17px;
top: -17px;
color: white;
}

#modalView__closeBtn {
cursor: pointer;
}
#modalView__closeBtn:after,
#modalView__closeBtn:before {
content: "";
height: 20px;
width: 20px;
border-top: 3px solid #ffffff;
position: absolute;
top: 13px;
right: 0px;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#modalView__closeBtn:before {
color: white;
right: 14px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#modalView__closeBtn:hover {
background-color: green;
}

Javscript.Js

const modalView = document.getElementById("modalView");

const closeBtn = document.getElementById("modalView__closeBtn");

closeBtn.addEventListener("click", () => {
modalView.style.display = "none";
});

Hasilnya

membuat alert javascript

Penutup

Dengan membaca syntax diatas saya yakin Kamu sudah memahaminya dengan baik, maka dari itu Kamu bisa merubahnya dan mencoba mengembangkan syntax nya agar bisa lebih bagus lagi dari contoh yang diatas. Demikian itulah bagaimana cara Membuat Alert JavaScript Sederhana Semoga bermanfaat. Terimakasih sudah berkunjung.

 

 

Related posts:

css class adalahMemahami Class pada CSS beserta Contohnya css class adalah6+ Contoh CSS Sederhana Untuk Pemula desain tabel html cssGaya Modern! Desain Tabel HTML dengan CSS button modern dengan htmlCara Membuat Button Modern dengan HTML dan CSS

Leave a Comment