Bagaimana untuk Menghalang Tatal Badan Apabila Tetingkap Modal Dibuka?

Mencegah Tatal Badan Apabila Modal Dibuka

Pernyataan Masalah:

Apabila menggunakan Modal daripada http://twitter.github.com/bootstrap , badan terus menatal apabila roda tetikus digunakan. Bagaimanakah kita boleh menghalang perkara ini?

Percubaan Penyelesaian:

Percubaan untuk menggunakan JavaScript untuk menghalang penatalan menggunakan $(window).scroll dan $(window).live('scroll') telah tidak berjaya .

Sokongan Bootstrap:

Bootstrap telah memperkenalkan kelas mod-open kepada badan apabila dialog modal dipaparkan. Kelas ini boleh digunakan untuk menghalang penatalan melalui CSS.

<code class="css">body.modal-open {
    overflow: hidden;
}</code>

Situasi Semasa (Dikemas kini 8 Feb 2013):

Penyelesaian ini tidak lagi berfungsi dengan Twitter Bootstrap v. 2.3.0, kerana kelas modal-open tidak ditambahkan pada badan.

Penyelesaian Semasa:

Tambah dan alih keluar kelas modal-open pada badan apabila modal dipaparkan dan disembunyikan, masing-masing menggunakan JavaScript berikut:

<code class="javascript">$("#myModal").on("show", function() {
    $("body").addClass("modal-open");
}).on("hidden", function() {
    $("body").removeClass("modal-open");
});</code>

Kemas Kini Masa Hadapan (11 Mac 2013):

Kelas terbuka modal dijangka akan kembali dalam Bootstrap 3.0 dengan tujuan yang jelas untuk menghalang tatal:

<code class="css">/* Enable Body overflow hidden */
.modal {
    ...
    /* support for transition.* to transition .bs-modal-backdrop and .bs-modal-content */
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    /* modal container size */
    width: 560px;
    margin: 20px auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    /* background color; best with border-radius for dialog box effect */
    /* fallback for IE7-8 */
    background-color: #ffffff;
    /* IE9+ */
    background-clip: padding-box;
    /* fade in effect; (speed/timing via CSS animation) */
    opacity: 1;
 }
/* body overflow hidden */
body.modal-open {
    overflow: hidden;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Tatal Badan Apabila Tetingkap Modal Dibuka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!