Modal bootstrap: latar belakang melompat ke atas saat beralih

111

Saya punya masalah, dengan modal. Saya memiliki tombol di halaman, yang mengaktifkan modal. Saat modal muncul, halaman akan melompat ke atas.

Saya telah melakukan semua yang saya bisa untuk menemukan solusi / dll, tetapi saya benar-benar tersesat.

EDIT:

Saya juga telah mencoba dengan: $('#myModal').modal('show');tetapi hasilnya sama persis.

javascript jquery css twitter-bootstrap twitter-bootstrap-3 FooBar
sumber
Halo Benni. Ya, saya menantang. Saya juga mencoba dengan: $ ('# myModal'). Modal ('show'); tetapi memiliki efek yang sama persis.
FooBar
1
dapatkah ini membantu Anda, masalah yang sama: stackoverflow.com/questions/12894570/…
Tandai
@ Mark, Lihat jawaban saya di bawah ...
Ravimallya
Saya perhatikan bahwa jika saya mengklik di mana saja di windowdalam moda itu, maka modal akan menyala. Tampaknya aneh dan tidak terduga. Saya menghapus buttonvia devtools, dan mengklik di mana saja di halaman tersebut masih membuka jendela modal. Apakah itu perilaku yang diinginkan? Saya ingin tahu apakah Anda tidak memiliki pemilih yang tepat untuk acara klik modal.
dward

Jawaban:

174

Ketika modal membuka modal-openkelas diatur ke <body>tag. Kelas ini diatur overflow: hidden;ke tubuh. Tambahkan aturan ini ke stylesheet Anda untuk mengganti gaya bootstrap.css:

body.modal-open {
    overflow: visible;
}

Sekarang gulungan itu harus tetap di tempatnya.

pstenstrm.dll
sumber
@pstenstrm, saya ragu. Anda diberitahu untuk mengganti css untuk kelas .modal-open. Tapi, bagaimana jika ada div penutup tambahan, dan dalam jawaban saya, saya tidak menimpa kelas apa pun dalam resolusi saya? Ini berfungsi dengan baik setelah menghapus 2 div tambahan. bs modal menambahkan div .modal-backdrop yang akan bingung di mana harus ditutup karena tag penutup tambahan.
Ravimallya
4
Tidak berfungsi untuk saya, saya memiliki modal di dalam iframe dan sedang bergulir ke atas ... ada ide?
Cabuxa.Mapache
5
Ini memperbaikinya untuk saya. Hanya untuk menambahkan akar masalah saya adalah 'body {height: 100%}'.
PeteG
23
Tidak bekerja untuk saya. Saya punya modal vanilla yang saya buka .modal('show')dan masih bergulir ke bagian atas halaman. Bootstrap v3.2.0
MandM
6
Saya harus menambah position: inheritkelas ini tetapi bekerja seperti pesona setelah itu.
adrian3martin
28

Jika Anda memanggil modal dengan tag. Coba hapus '#' dari atribut href. Dan panggil modal dengan atribut data.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
Gokhan
sumber
Saya membukanya persis seperti yang Anda posting di sana. Lihat tautannya
FooBar
5
jika Anda tidak menggunakan "<button>" tetapi <a>, seperti dalam kasus saya, Anda kehilangan ikon "tombol jari" saat Anda menggerakkan kursor mouse pada objek. Untuk mengatasi ini, saya telah melakukannya: ... href = "# mai_modal_id" data-toggle = "modal" ... dan saya tidak menggunakan data-target
pagurix
3
@pagurix - Komentar Anda bekerja paling baik untuk skenario saya.
AlfredBr
Menurut saya, @pagurix harus menulis komentarnya sebagai jawaban terpisah. Satu-satunya hal yang membantu. Jempolan!
Vibhor Dube
14

jika Anda menggunakan tag anchor karena <a href"#" ..> ... </a>dan href="#"menimbulkan masalah, hapus itu. Anda dapat membaca lebih lanjut di sini

Nimesh Jain
sumber
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Ini akan membantu Anda menghentikan scroll bar yang berada di atas. Ini berhasil untuk saya

Georgi Mirchev
sumber
5

Mungkin bekerja dengan modal yang bersarang di suatu tempat dalam kode:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

Bagi saya itu adalah kombinasi dari posisi, ketinggian, dan luapan.

Dennis Heiden
sumber
4

Saya tidak melihat kesalahan tertentu, tetapi saya menyarankan Anda untuk memeriksa sintaks html Anda .

Sebuah tes kecil dengan sumber Anda memberi saya kesalahan seperti

Baris 127, Kolom 34: div elemen tidak tertutup.

              <div class="inner onlySides">

Ini bisa menjadi masalah.

billyJoe
sumber
Terima kasih - Saya akan memeriksa ini - meskipun saya merasa sulit untuk percaya bahwa ini dapat memicu masalah yang saya alami. Sepertinya Anda menggunakan plugin untuk melacak ini - jika demikian; yang?
FooBar
saya tidak menggunakan plugin kecuali firebug. Itu selalu merupakan hal yang baik untuk memeriksa validitas halaman Anda di validator.w3.org . Ini akan menjadi masalah karena jika div tidak ditutup, Anda akan berperilaku aneh :)
billyJoe
4

Cara termudah untuk menyelesaikan latar belakang lompatan adalah dengan menentukan dua parameter:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
Nils
sumber
3

Saya mencoba mereplikasi masalah ini di localhost saya dan seaneh kelihatannya, ada konflik dengan file Bootstrap JS yang Anda gunakan.

Coba komentari kode Anda tentang:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

Dan sebagai gantinya gunakan Bootstrap 2.3.2:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Ini membuatnya berhasil untuk saya.

Saya mencobanya dengan Bootstrap versi 3 tetapi tidak berhasil. Saya masih tidak dapat menentukan bagian masalahnya tetapi di suatu tempat di sepanjang Firebug memberi saya e.preventDefault() is not a functionkesalahan - Saya menduga ini harus menjadi penyebab utama tetapi saya belum membandingkannya dengan file JS lainnya.

AyB
sumber
3

Saya mencoba mengatur .modal atas di tengah layar. 

.modal {
    position: absolute;
    top: 50%;
}

Hanya 2 sen pikiran saya.

Holger Thiebosch
sumber
Cukup dekat. Saya tidak akan menurunkan suara karena masalah saya mungkin ada di tempat lain, tetapi ini menyebabkan bagian bawah layar menjadi redup, tetapi modal diposisikan ke arah tengah.
perajin
3

Dalam bootstrap 3.1.1 saya menyelesaikan dengan solusi ini:

body.modal-open {
    position: absolute !important;
}
Filo
sumber
2
Anda menyelamatkan hari saya @Filo Terima kasih banyak
vinothini
2

Anda memiliki 2 divtag penutup tambahan tepat sebelum <div id="footer">atau setelah<div id="mainFrame" class="group"> div. Saya menggunakan visual studio 2012 express untuk memeriksanya.

Hapus 2 div tambahan ini dan beri tahu kami cara kerjanya. Saya menghapus div ekstra dan menghapus semua skrip kustom. hanya mempertahankan inti jquery dan bootstrap di footer. berikut adalah tangkapan layar dari hasil akhir. berikut adalah taman bermain jsbin untuk Anda yang berfungsi dengan baik.

Saya menyarankan Anda untuk menggunakan headjs untuk memuat semua skrip dan file css. juga bukan praktik yang baik untuk memuat skrip apa pun dua kali.

masukkan deskripsi gambar di sini

Ravimallya
sumber
4
jawaban yang tidak disukai membutuhkan komentar yang tepat dengan alasan.
Ravimallya
2

Coba gunakan ini untuk membuka modal dan lihat apa yang terjadi:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
scooterlord
sumber
2 
body.modal-open {
overflow: visible !important;
}

Saya membutuhkan atribut penting untuk memperbaikinya

Dizzle
sumber
Ini berhasil untuk saya, dan saya memiliki masalah @ MandM (di komentar) dari jawaban pstenstrm: "Tidak berfungsi untuk saya. Saya punya vanilla modal yang saya buka dengan .modal ('show') dan masih bergulir ke bagian atas halaman. Bootstrap v3.2.0 ". Satu-satunya efek aneh yang dimilikinya adalah bahwa sekarang latar belakang akan bergulir jika Anda terus menggulirkan modal yang lebih tinggi dari jendela, tetapi ini adalah masalah kecil bagi saya. Terima kasih.
dgig
1

Saya memiliki masalah yang sama menggunakan Bootstrap 2.3.2

Terjadi masalah saat mengklik link:

Triknya adalah: return false;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

dan js:

function openModal() {
    $('#myModal').modal('show');
}
mpccolorado.dll
sumber
1

Saya menghabiskan waktu berjam-jam untuk mencoba semuanya di sini dan di tempat lain. Untuk penggunaan angularjs-material, ternyata saya harus menonaktifkan animasi pada objek config uibModal.open arg.

Sebagai contoh:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

Semoga ini bisa membantu orang lain.

Pantai Nathan
sumber
1

Jika Anda menghadapi masalah ini dalam program Angular, tambahkan kode di bawah ini pada baris pertama file .scss.

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
sibashankar panda
sumber
0

Saya memiliki masalah yang sama dan saya pikir saya mencari tahu. Anda hanya perlu menempatkan modal HTML sebagai turunan langsung dari tag body ! Anda dapat menempatkan kode HTML untuk tombol yang memicu modal di mana pun Anda membutuhkannya. Saya yakin ini menghindari masalah pewarisan CSS dan posisi yang memicu masalah ini.

Contoh:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</body>
nunoarruda.dll
sumber
0

Akhirnya menemukan yang ini. JANGAN membungkus tombol yang menargetkan modal dalam tag anchor.

Buruk

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

Baik

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
ALFmachine
sumber
0

Yang ini melakukannya untuk saya

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
jenaka
sumber
Saya mengalami masalah serupa dengan navbar dan container jumping saat modal dibuka. Inilah yang saya cari.
Awhitey98
Senang bisa membantu!
lucu
0

Setelah membaca lusinan jawaban selama beberapa jam saya menyalin lagi kode asli dari file bootstrap dan men-debug langkah demi langkah untuk melihat apa yang menyebabkan saya selalu melompat ke atas. Karena versi terbaru dari Bootstrap 3 menunjukkan modal pada posisi Anda saat ini. Saya telah mengetahui bahwa -webkit-transform: translate3d(0,0,0);dan height: 100%dalam css body-tag saya menyebabkan perilaku ini. Mungkin ini membantu seseorang.

AlexioVay
sumber
0

Bagi saya berfungsi ketika saya mengubah versi dari 3.1.1 menjadi 3.3.7

Jika Anda tidak harus menggunakan versi 3.3.1 coba ganti.

Setelah perubahan, sebaiknya periksa apakah fungsi lainnya berfungsi dengan benar.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Pyot
sumber
0

body.modal-open { position: inherit; }

Ini bekerja seperti pesona bagi saya.

Nimish goel
sumber
0

Saya mencoba semua contoh di atas - ini adalah satu-satunya hal yang berhasil untuk saya:

.modal-open {

            padding-right: 0 !important;

        }

Melepaskan bantalan dari sisi kanan model - mencegah lompatan.

Stnfordly
sumber
0

tinggi: 100% memecahkan masalah, tetapi Anda harus menambahkan "div" yang benar

Anar Ali
sumber
0

Saya mendapat masalah yang sama dan tidak ada jawaban yang membantu saya. Menemukan solusi yang terlihat bodoh tetapi berhasil setidaknya dalam kasus saya.

Saya menemukan bahwa halaman menggulir ke atas hanya sekali dan setelah itu modal terbuka berikutnya berfungsi seperti yang diharapkan. Kemudian saya menemukan bahwa menyembunyikan elemen apa pun di DOM memulai gulungan aneh yang sama. Jadi saya hanya membuat div dummy setelah pemuatan halaman daripada menyembunyikan dan menghapusnya dan ini menyelesaikan masalah.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
Borzilo Andrey
sumber
0

Saya menghadapi masalah yang sama. Masalahnya adalah saya menambahkan kelas .modal-open ke html dan elemen tubuh. Cukup tambahkan kelas ini ke tubuh dan semuanya berfungsi seperti yang diharapkan.

umum666
sumber
-1

Coba ini bekerja dengan sempurna

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
minimal
sumber
-3

Jika jawaban pstenstrm tidak berhasil untuk Anda, coba gabungkan dengan HTML tombol pengganti ini:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

Ini harus membuat tombol tetap di layar.

Ben
sumber