Cara Membuat Pesan Informasi dengan Cara Mengklik

Hampir mirip seperti kita membuat tombol bantuan ya teman-teman dimana ketika kita klik button atau tombol akan menghasilkan pesan deskripsi yang di tuju, tapi disini caranya berbeda dengan artikel yang telah kita buat untuk tombol bantuan, disini kita bisa menutupnya lagi pesan informasinya itu ketika kita sudah selesai membacannya, apakah teman-teman sudah bisa membayangkan oke jika belum teman-teman simak terus ya, untuk cara membuat pesan informasi dengan cara mengklik.

Ketika kita mengklik teman-teman ingin menampilkan apa, itu seterah ya teman-teman, klik disini saya akan membuat sebuah tag a ya teman-teman. Dan untuk cara membuat pesan informasi dengan cara mengklik, saya masih menggunakan materialize, di materialize namanya adalah 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 langsung saja kita buat yuk teman-teman:

  <!DOCTYPE html>
  <html>
    <head>
    	<title>cara membuat 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 website 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 membuat 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>Mengapa kita menggunakannya?</h4>
            <p>Sudah merupakan fakta bahwa seorang pembaca akan terpengaruh oleh isi tulisan dari sebuah halaman saat ia melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah karena ia kurang lebih memiliki penyebaran huruf yang normal, ketimbang menggunakan kalimat seperti "Bagian isi disini, bagian isi disini", sehingga ia seolah menjadi naskah Inggris yang bisa dibaca. Banyak paket Desktop Publishing dan editor situs web yang kini menggunakan Lorem Ipsum sebagai contoh teks. Karenanya pencarian terhadap kalimat "Lorem Ipsum" akan berujung pada banyak situs web yang masih dalam tahap pengembangan. Berbagai versi juga telah berubah dari tahun ke tahun, kadang karena tidak 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, jika sudah bagaimana hasil tampilannya:

ini sebelum di klik ya teman-teman, dan sekaran kita coba klik

bagaimana keren ya teman-teman dan ada agree untuk memnutup kembali pesan tersebut, oke seperti itulah cara membuat pesan informasi dengan cara mengklik, semoga bermanfaat dan sampai jumpa pada artikel selanjutnnya terimakasih.