Trigger Modal Bootstrap Tanpa Javascript

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.

Modal title

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">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">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">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.