Membuat modal Bootstrap

Transkripsi

1

2 Membuat modal Bootstrap Oleh: Jaf Al Azam Membuat modal Bootstrap Modal atau di sebut juga pop up, sekarang sangat banyak di gunakan di website-website karena sangat memudahkan pengguna. Dengan adanya modal dalam suatu website maka akan menghemat tempat, karena tidak perlu pindah ke halaman selanjutnya, tetapi memunculkan isi konten berbentuk pop-up. Selamat mencoba. Assalammualaikum Wr. Wb. Modal atau di sebut juga pop up, sekarang sangat banyak di gunakan di website-website karena sangat memudahkan pengguna. Dengan adanya modal dalam suatu website maka akan menghemat tempat, karena tidak perlu pindah ke halaman selanjutnya, tetapi memunculkan isi konten berbentuk pop-up. Selamat mencoba. Framework CSS Bootstrap telah menyediakan fitur modal, modal pada Bootstrap mempunyai beberapa ukuran. Ukuran dari modal tersebut dapat di gunakan sesuai kebutuhan. Ukuran modal pada Bootstrap ada yang large, small dan standar (medium). Dan ingat sebelum melanjutkan tutorial ini harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya. 1. Small modal Pertama kita membuat small modal pop-up, ini merupakan modal terkecil pada bootstrap. Perlu di ketahui bahwa modal pada bootstrap memiliki animasi berbentuk fade. Dan untuk membuat modal pada Bootstrap tidak perlu di gunakan CSS tambahan, tetapi dapat di tambahkan jika ingin di percantik. <!-- Small modal --> class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">small modal</button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mysmallmodallabel"> <div class="modal-dialog modal-sm"> class="close"

3 <h4 class="modal-title" class="btn btn-default" data-dismiss="modal">close</button> pertama membuat button yang memiliki data target class.bs-example-modal-sm, yang mengarah pada class.bs-example-modal-sm yang berada pada di bawahnya. dan pada contoh ini isi kontennya di kosongkan. 2. Standard modal (Medium) Ini merupakan modal berukuran standard atau medium pada bootstrap. modal ini memiliki ukuran sedikit lebih besar dari pada small modal, <!-- Standard modal --> class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-md">standard modal</button> <div class="modal fade bs-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="mystandardmodallabel"> <div class="modal-dialog modal-md"> class="close" <h4 class="modal-title"

4 class="btn btn-default" data-dismiss="modal">close</button> pertama membuat button yang memiliki data target class.bs-example-modal-md, yang mengarah pada class.bs-example-modal-md yang berada pada di bawahnya. dan pada contoh ini isi kontennya juga di kosongkan. 3. Large modal (Medium) Ini merupakan modal berukuran Besar pada bootstrap. modal ini memiliki ukuran paling besar pada Bootstrap <!-- Large modal --> class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mylargemodallabel"> <div class="modal-dialog modal-lg"> class="close" <h4 class="modal-title" class="btn btn-default" data-dismiss="modal">close</button>

5 pertama membuat buuton yang memiliki data target class.bs-example-modal-lg, yang mengarah pada class.bs-example-modal-lg yang berada pada di bawahnya. dan pada contoh ini isi kontennya juga di kosongkan. Demo terimakasih telah melihat tutorial dari saya, nantikan tutorial bootstrap selanjutnya dari saya. Tentang Penulis Jaf Al Azam Teknik Informatika Universitas Bengkulu,. melaju kencang menuju impian. ("technojaf")