loading

Trigger Modal Bootstrap Tanpa Javascript

Modal Bootstrap

Yang dimaksud Trigger Modal tanpa javascript adalah triggernya. Bukan mau menggunakan modal tapi tanpa javascript sama sekali. O iya ini bukan modal uang lho ya tapi modal dalam istilah web programming. Kalau modal buat usaha cari di bank saja, terserah kamu mau cari bank mana, karena aku lebih suka nenk, karena kalau nenk biasanya cantik, aku bukan gay. Gubrak! kok ngelantur sih.

Baiklah langsung saja, berikut ini langsung pada praktek dan kodenya, pelajari sendiri saja, karena ini memang catatan pengingat bagiku sendiri, kalau lupa tinggal cari kesini.

Sebelum menuju kode scriptnya, perhatikan dulu masing-masing contoh modal dibawah ini, semua kodenya akan ditulis dibawah.

Semua modal diatas semua berfungsi loh di blog jelek ini. Meskipun masih contoh pencarian sederhana dan embed video. Tapi kalau ini sudah dikombinasikan dengan AJAX, jangan bilang deh, pasti menjadi aplikasi yang bagus. Misalnya membuat program Akuntansi berbasis web.

Berikut ini kodenya:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal Video</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/pSn-DpuM7Lo?rel=0"></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Large modal -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-lg">Form Search Besar</button>
<!-- Modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form action='/search' role='search' target='_top'>
<div class='input-group'>
<input autocomplete='off' class='form-control input-lg' name='q' placeholder='Keywords here' size='30' type='text' value=''/>
<div class='input-group-btn'>
<button class='btn btn-success btn-lg' type='submit'><i class='glyphicon glyphicon-search'></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target=".bs-example-modal-sm">Form Search Kecil</button>
<!-- Modal -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<form action='/search' role='search' target='_top'>
<div class='input-group'>
<input autocomplete='off' class='form-control input-sm' name='q' placeholder='Keywords here' size='30' type='text' value=''/>
<div class='input-group-btn'>
<button class='btn btn-success btn-sm' type='submit'><i class='glyphicon glyphicon-search'></i></button>
</div>
</div>
</form>
</div>
</div>
</div>

Mungkin parameter lain masih diabaikan, tapi script sudah berjalan berarti bisa dipakai. Yang mau ambil untuk blognya silahkan ngopi, aku mau susu aja.

Komentar 2

  1. Syamsul Anwar29 Agustus, 2017

    Bagus mas blognya, fiturnya mantabs!

    BalasHapus
    Balasan
    1. Terima kasih mas, hanya blog sederhana dan kecil

      Hapus
 
Jika kesulitan memilih ID, gunakan opsi Name/URL, isikan nama Anda, URL isi dengan URL profil facebook atau kalau lupa biarkan kosong. Link aktif di dalam komentar jika tidak relevan akan masuk kotak spam.
<b>, <i> standar bisa digunakan. Tag lain dibawah ini:
{u} text bergaris {/u}
{small} text kecil {/small}
{center} text rata tengah {/center}
{blockquote} text dalam blockquote {/blockquote}
{img} url-gambar {/img}
{youtube} url-video-youtube {/youtube}
{code} kode yang sudah di encode {/code}
Encode kode disini (tidak perlu menambahkan {code} dan {/code}
   

Popular Posts this Week 

Aplikasi Hari Selamatan Orang Meninggal (Perhitungan Online)

Aplikasi Hari Selamatan Orang Meninggal (Perhitungan Online)

Aplikasi Perhitungan Hari Selamatan Orang Meninggal dibawah ini sangat berguna untuk orang jawa, karena di keluarga manapun tidak akan terl...

Tipe Kamu Dari Cara Nyontek dan Perkerjaan Yang Cocok

Tipe Kamu Dari Cara Nyontek dan Perkerjaan Yang Cocok

Tipe Orang Menurut Cara Nyontek mungkin tidak menjadi salah satu ukuran dalam hal yang serius, tapi lumayan untuk menambah referensi dan m...

Kalender 2018 dan Hari Besar Libur Nasional

Kalender 2018 dan Hari Besar Libur Nasional

Download Kalender 2018 dan Hari Besar / Libur / Cuti Nasional dalam file PDF, sebenarnya mau membuat untuk versi kalender 2018 excel, tapi ...