Pada CSS Framework telah tersedia modal, modal yang tersedia pada Bootstrap memiliki beberapa ukuran. Tetapi dari beberapa ukuran tersebut tidak ada ukuran yang full screen, untuk dapat membuat modal Full Screen ada tambahan CSS yang perlu di tambahkan, sehingga akan tercipta ukuran modal Full Screen yang di inginkan.Selamat mencoba .
Dengan adanya modal Bootstrap Full Screen, maka dapat memasukkan content dalam modal dengan lebih banyak karena ruang yang tersedia akan lebih besar , dan dengan adanya modal kita dapat menghemat halaman tidak perlu pindah halaman, cukup dalam halaman yang sama. Dan ingat sebelum melanjutkan tutorial ini harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya.
Full Screen Modal
Sebenarnya struktur modal Full Screen sama halnya dengan struktur modal Bootstrap pada umumnya, perbedaannya kita perlu menambahkan CSS agar modal pada Bootstrap dapat ditampilkan menjadi Full Screen. Juga perlu di tambahkan jquery ( jquery-2.1.3.min.js ) .
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <div class="container-fluid"> <div class="row"> <div class="col-xs-6 col-md-6 big-box" > <h2 data-toggle="modal" data-target="#modal1">FULL MODAL</h2> <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog text-justify"> <div class="modal-content "> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h3 class="modal-title" id="myModalLabel"><strong>Title Modal </strong> </br><small>Published Juni, 2015</small></h3> </div> <div class="modal-body"> <p>Thundercats adipisicing marfa wes anderson farm-to-table, +1 vero yr ennui messenger bag occaecat williamsburg cosby sweater anim tattooed. Farm-to-table umami direct trade viral cosby sweater Austin. Magna tattooed irure, DIY </p> <p>Thundercats adipisicing marfa wes anderson farm-to-table, +1 vero yr ennui messenger bag occaecat williamsburg cosby sweater anim tattooed. Farm-to-table umami direct trade viral cosby sweater Austin. Magna tattooed irure, DIY </p> <p>Thundercats adipisicing marfa wes anderson farm-to-table, +1 vero yr ennui messenger bag occaecat williamsburg cosby sweater anim tattooed. Farm-to-table umami direct trade viral cosby sweater Austin. Magna tattooed irure, DIY </p> <p>Thundercats adipisicing marfa wes anderson farm-to-table, +1 vero yr ennui messenger bag occaecat williamsburg cosby sweater anim tattooed. Farm-to-table umami direct trade viral cosby sweater Austin. Magna tattooed irure, DIY </p> <p>Thundercats adipisicing marfa wes anderson farm-to-table, +1 vero yr ennui messenger bag occaecat williamsburg cosby sweater anim tattooed. Farm-to-table umami direct trade viral cosby sweater Austin. Magna tattooed irure, DIY </p> </div> </div> </div> </div> </div> </div></div> |
struktur HTML nya sama pada modal Bootstrap umumnya, pertama membuat sebuah link agar menuju pada modal bootstrap, di sini linknya hanya berbentuk teks di dalam tags <h2>. kita dapat mengganti linknya dengan button atau sesuai kebutuhan.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| .big-box h2 { text-align: center; width: 100%; font-size: 1.8em; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; cursor:pointer;}.modal-dialog { width: 100%; height: 100%; padding: 0; margin:0;}.modal-content { height: 100%; border-radius: 0; color:#333; overflow:auto;}.modal-title { font-size: 3em; font-weight: 300; margin: 0 0 10px 0;}.close { color:black ! important; opacity:1.0;} |
karena text default cursornya bukan pointer, di sini di tambahkan CSS cursor menjadi pointer. Selanjutnya di ubah ikuran modalnya menjadi 100% baik heightmaupun width.
Running
Tidak ada komentar:
Posting Komentar