Membuat Popup di Yii ketika website di buka

Pada tutorial kali ini kita akan belajar membuat popup pada Yii yang muncul ketika website pertama kali dibuka. Langkah-langkahnya:

1. Siapkan gambar dan copy/upload gambar ke folder

dapatkan link gambar yang diupload, misalnya: http://website.com/images/gambar.jpg

2. Edit file main.php dengan notepad

Edit file main.php yang terletak pada webroot --> protected --> views --> layout --> main.php seperti gambar dibawah ini;

3. Popup dibuat dengan memanfaatkan bootstrap yang ada di yii.

Tulis kode dibawah ini dan taruh diantara kode <body> .......</body>

<body>
.........
.........
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <img src="http://website.com/images/gambar.jpg" style="width: 100%">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

.........
.........
</body>

Hapus data-backdrop="static" data-keyboard="false" apabila ingin ketika di klik pada bagian luar popup, popup langsung tertutup.

4. Selanjutnya yang kita butuhkan adalah triger untuk membuka popup.

Karena kita ingin ketika membuka website popup terbuka, kita gunakan jquery. Tambahkan kode dibawah ini setelah </body>

$( document ).ready(function() {
    $('#myModal').modal('show');
});

5. Menggunakan cookies

Agar popup hanya muncul ketika website pertama kali dibuka, kita manfaatkan penggunaan cookies dan modifikasi kode di no. 4

$( document ).ready(function() {
<?php
$cookie = Yii::app()->request->cookies['tampil']->value;
$tampilpop=false;
if(!$cookie){
 Yii::app()->request->cookies['tampil'] = new CHttpCookie('tampil', true);
 Yii::app()->request->cookies['tampil']->expire=0;
 $tampilpop=true;
 }

if ($tampilpop) {
?>
    $('#myModal').modal('show');
<?php } ?>
});

Semoga bermanfaat

1 komentar:

Unknown6 Oktober 2016 pukul 04.21
Ingin beruntung seperti temen-temen kamu?

Langsung saja kamu mendaftar di AsliBandar dan rasakan permainan yang akan membuat hidupmu berwarna.

Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

Ingin beruntung seperti temen-temen kamu?

Langsung saja kamu mendaftar di www.AsliBandar.net dan rasakan permainan yang akan membuat hidupmu berwarna.

Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

Untuk Info lebih lanjut silahkan menghubungi kami melalui :

Pin BB : 2B3C34F4
YM : Aslibandar_CS
Skype : AsliBandar
Telp : +855882388666
FB : AsliBandar
BalasHapus
Balasan