Unduh Situs Web Resmi Bootstrap: http://v3.bootcss.com/
Hari ini saya akan berbagi masalah yang dihadapi dalam menggunakan kerangka bootstrap. Sejumlah besar jendela pop-up (modal) digunakan selama pengembangan produk.
Ketika saya pertama kali mulai belajar menggunakannya, saya menemukan bahwa jendela ini tidak dapat dipusatkan secara vertikal, selalu ke atas, dan tidak dapat diseret. Setelah melihat instruksi untuk digunakan, saya tidak memberikan terlalu banyak pengaturan dan metode atribut, jadi saya menggunakan metode default. Baru-baru ini, pelanggan telah membuat permintaan: dapatkah jendela pop-up dipusatkan? Karena beberapa jendela kecil berada di sisi atas, halaman keseluruhan tidak seimbang, dan yang lebih besar masih dapat diterima.
Karena saya tidak terlalu terbiasa dengan bootstrap sebelumnya, saya memulai Baidu dan Google dan menemukan bahwa hanya ada beberapa solusi, sebagai berikut:
$ ("#myModal"). Modal (). css ({"margin -top": function () {return - ($ (this) .height () / 2);}});Alamat referensi: http://www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/
Saya mencoba metode ini sendiri, tetapi itu tidak sepenuhnya terpusat. Jika ukuran jendela berbeda, nilai margin-top yang ditampilkan juga akan berubah setiap kali, dan akan ada bilah gulir pada lapisan penutup, yang tidak terlihat bagus.
Saya juga mencoba beberapa cara untuk mengubahnya, tetapi itu tidak optimis. Saya menemukan bahwa saya tidak bisa mendapatkan nilai $ (ini) .height () sebelum jendela muncul. Saya pikir saya menggunakan ($ (window) .height ()-$ (ini) .height ())/2, tetapi saya menemukan bahwa itu masih tidak layak.
Akhirnya, saya hanya dapat mempelajari kode sumber dan menemukan bahwa kode berikut dapat ditambahkan setelah 900 baris file bootstrap.js untuk mencapai pusat vertikal.
itu. $ element.children (). eq (0) .css ("position", "absolute"). css ({"margin": "0px", "top": function () {return (that. $ element.height () - that. $ element.children (). EQ (0). HEIGHT () - 40) - 40) - "PERUBAHAN" (). EQ (EQ (0) .HEIGH (itu. $ element.width () - itu. $ element.children (). eq (0) .width ()) / 2 + "px";}});Kode halaman adalah sebagai berikut:
<div><button data-toggle="modal" data-target="#myModal">Launch demo modal</button><!-- Modal --><div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div><div><div><button type="button" data-dismiss="modal" aria-hidden = "true"> × </button> <h4 id = "mymodallabel"> judul modal </h4> </div> <viv> ... </div> <v> <tombol type = "tombol" data-dismiss = "modal"> tutup </butt> <tombol type = "Tombol"> Simpan perubahan </div> </div>-. /.modal-dialog-> </div> <!-/.modal-> </div>
Rendering adalah sebagai berikut:
Di atas adalah contoh kode vertikal dari kotak modal bootstrap (modal) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!