Cara Membuat PopUp Modal Boostrap dan JS

Popup adalah jendela awal yang pertama kali muncul ketika halam web kita di buka dan biasanya ditambahai tobol close atau tutup untuk menutup jendela pou up kita.
Modal adalah sebuah jendela info dari sebuah web yang ingin kita tampilkan dan biasanya berisi informasi, peringatan maupun petunjuk.
nah pada kesempatan kali ini zlearn akan berbagi tutorial bagaiman caranya sih membuat popup modal dengan bootsrap dan javascript  oke langsung saja ketutorial berikut. pastiak anda sudah memiliki bootraps.min.js, jquery dan css bootraps bisa di unduh di www.bootsrap.com

pertama buka text editor anda kemudian buat sebua fie html kemudia pastekan script berikut:


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content modal-sm">
            <div class="modal-header ">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" style="color: #f0ad4e;">Peringatan</h4>
            </div>
            <div class="modal-body">
                <p style="color: #f0ad4e;">Pastikan Anda Terkoneksi Internet Untuk Memutar Video.Jika anda tidak terkoneksi maka video tidak tereload.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal" style="background-color: #02050c">Tutup</button>
            </div>
        </div>

    </div>
</div>

<!-- Modal -->



nah setelah anda membuat file .html kemudian tambahkan script javascript berikut:

<script type="text/javascript">
$('#myModal').modal('show');
</script>

lalu gabungkan kedu script diatas menjadi satu seperti berikut:


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content modal-sm">
            <div class="modal-header ">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" style="color: #f0ad4e;">Peringatan</h4>
            </div>
            <div class="modal-body">
                <p style="color: #f0ad4e;">Pastikan Anda Terkoneksi Internet Untuk Memutar Video.Jika anda tidak terkoneksi maka video tidak tereload.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal" style="background-color: #02050c">Tutup</button>
            </div>
        </div>

    </div>
</div>

<!-- Modal -->
<script type="text/javascript">
$('#myModal').modal('show');
</script>

silahkan jalankan di aplikasi browser anda dan pastikan browser anda support js atau enable js yaaa. berikut tampilannya kurang lebih seperti ini:

zlearn


untuk ukuran 

kecil
<div class="modal-content modal-sm">
besar
<div class="modal-content modal-lg">
sedang
<div class="modal-content modal-md">


sekian informasi dan tutorial dari zlearn tentang bagaimana caranay membuat modal popup dengan javascript, membuat modal yang terbuka ketika halaman web tereload. silahkan tuliskan komentar anda dan silahan share artikel tentang Cara Membuat PopUp Modal Boostrap  dan JS.

Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...