Cara Membuat Pesan Informasi dengan Cara Mengklik
Hampir mirip seperti kita membangun tombol bantuan ya teman-teman dimana ketika kita klik button atau tombol akan menghasilkan pesan keterangan yang di tuju, tapi disini caranya berbeda dengan artikel yang telah kita bikin bagi tombol bantuan, disini kita dapat menutupnya lagi pesan informasinya itu ketika kita telah selesai membacannya, apakah teman-teman telah dapat membayangkan oke apabila belum teman-teman simak terus ya, bagi cara membangun pesan informasi dengan cara mengklik.
Ketika kita mengklik teman-teman ingin menampilkan apa, itu seterah ya teman-teman, klik disini saya akan membangun sebuah tag a ya teman-teman. Dan bagi cara membangun pesan informasi dengan cara mengklik, saya masih menggunakan materialize, di materialize namanya yaitu javascript modals, yang jelas bukan modal nikah, atau dagang ya teman-teman hehe, sebenarnnya ada tiga efek saya akan mencontohkan satu dulu takut kepanjangan nantinnya, oke seketika saja kita bikin yuk teman-teman:
<!DOCTYPE html>
<html>
<head>
<title>cara membangun pesan informasi dengan cara mengklik</title>
<!--Import Google Icon Font-->
<link href=https://fonts.googleapis.com/icon?family=Material+Icons rel=stylesheet>
<!--Import materialize.css-->
<link type=text/css rel=stylesheet href=css/materialize.min.css media=screen,projection/>
<!--Let browser know laman is optimized for mobile-->
<meta name=viewport content=width=device-width, initial-scale=1.0/>
<-E-style type=text/css>
.container{
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div class=container>
<h1>cara membangun pesan informasi dengan cara mengklik</h1>
<!-- Modal Trigger -->
<a class=waves-effect waves-light btn modal-trigger href=#modal1>Apakah Lorem Ipsum itu?</a>
<!-- Modal Structure -->
<div id=modal1 class=modal>
<div class=modal-content>
<h4>Kenapa kita menggunakannya?</h4>
<p>Telah adalah fakta bahwa seorang pembaca akan terpengaruh oleh isi tulisan dari sebuah halaman dikala ia melihat tata letaknya. Maksud pemakaian Lorem Ipsum yaitu karena ia kurang lebih mempunyai penyebaran huruf yang normal, ketimbang menggunakan kalimat seperti Bagian isi disini, bagian isi disini, sehingga ia seolah menjadi naskah Inggris yang dapat dibaca. Banyak paket Desktop Publishing dan editor situs web yang kini menggunakan Lorem Ipsum selaku contoh teks. Karenanya pencarian kepada kalimat Lorem Ipsum akan berujung di banyak situs web yang masih pada tahap pengembangan. Beragam versi pun telah berubah dari tahun ke tahun, kadang karena tak sengaja, kadang karena disengaja (misalnya karena dimasukkan unsur humor atau semacamnya)</p>
</div>
<div class=modal-footer>
<a href=#! class=modal-action modal-close waves-effect waves-green btn-flat>Agree</a>
</div>
</div>
<!--Import jQuery before materialize.js-->
<-E-script type=text/javascript src=https://code.jquery.com/jquery-3.2.1.min.js></script>
<-E-script type=text/javascript src=js/materialize.min.js></script>
<-E-script type=text/javascript>
$(document).ready(function(){
// the href attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</div>
</body>
</html>
Disini saya menggunakan class modal dan id modal1 ya teman-teman coba teman-teman lihat terlebih dahulu, apabila telah bagaimana hasil tampilannya:
ini sebelum di klik ya teman-teman, dan sekaran kita coba klik
bagaimana keren ya teman-teman dan ada agree bagi memnutup kembali pesan tersebut, oke seperti demikianlah cara membangun pesan informasi dengan cara mengklik, semoga bermanfaat dan hingga jumpa di artikel selanjutnnya terimakasih.
Sumber https://kursuswebsite.org
