Penggunaan Popup dengan Alertsweet2 di Codeigniter
Dalam tutorial kali ini anda akan belajar tentang pustaka dengan nama SweetAlert2 yang mungkin kita untuk membuat pesan peringatan dengan tampilan yang menarik.
Masukan tag javascript di bawah ini, simpan di file codeigniter application->view->index.php
<
script
src
=
"https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"
>
</
script
>
Selain file javascript, anda juga harus memuat file CSS yang digunakan untuk mengatur tampilan box lebih menarik tag seperti dibawah ini.
<
link
rel
=
'stylesheet'
href
=
'https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'
>
Setelah anda menginstal pustaka di atas, Sebenernya membuat AlertSweet sangatlah mudah.
Scriptnya untuk keseluruhannya seperti ini.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alertsweet to CodeIgniter</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<button class="third">Alertsweet</button>
</body>
<Script>
document.querySelector(".third").addEventListener('click', function(){ //function klik ketika di jalankan
swal({
title: "Are you sure about deleting this file?", //judul dari alretsweet
type: "info", //tipe yang digunakan info
showCancelButton: true,//tampilkan Button cancel
confirmButtonText: "Delete It", // tampilkan Button dengan nama Delete It
confirmButtonColor: "#ff0055",//menampilkan warna di button delete it dengan warna merah muda
cancelButtonColor: "#999999",//menampilkan button dengan warna abu-abu
reverseButtons: true,
focusConfirm: false,
focusCancel: true
});
});
</Script>
</html>
Lalu jalankan script di atas dan hasilnya seperti di bawah ini ketika button Alertsweet nya diklik.
Terimakasih telah mengunjungi blog saya semoga bermafaat. Selamat mencoba.
Comments
Post a Comment