分頁後顯示.bs.modal

我在頁面中使用了一些模式，但是每當我打開模式（或觸發shown.bs.modal事件）時，整個頁面的寬度會縮短一點。這是發生了什麼：分頁後顯示.bs.modal

我點擊「搜索聯絡」元素：

我看到它是壞的背景：

發生這種情況時，我做了幾次：

這些是我使用的代碼：

<div id="contact-dialog" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Mesaj Gönder</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Test</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">Gönder</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Vazgeç</button> 
      </div> 
     </div> 
    </div> 
</div> 

<div id="sent-dialog" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title"><span class="glyphicon glyphicon-ok"></span> Gönderildi</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Mesaj Gönderildi.</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Tamam</button> 
      </div> 
     </div> 
    </div> 
</div>

腳本：

$(document).ready(function(){ 
    $("#contact-dialog").on("hidden.bs.modal", function(){ 
     $("#sent-dialog").modal("show"); 
    }); 
});

我該如何解決這個問題？

來源

2015-09-26 Erdin Eray

代碼和模式沒有什麼錯誤http://jsfiddle.net/pe86f7pn/必須有別的東西，你使用任何動畫的CSS？ – Shehary

好吧，顯然不是。但是，我使用Opera來查看頁面。 Firefox沒有問題。這似乎是Opera的渲染器的問題。我現在想知道它是否與Chrome一樣，因爲當前的Opera有Chromium內核。 –

我沒有歌劇，但我檢查了火狐和鉻，都更新到最新版本，並沒有問題 – Shehary

與OP討論後;

的第一件事情，我不能與提供的代碼重現該問題的提問時情態動詞使用jQuery 2.1.0和引導版本3.0.0在打開最新版本的firefox，chrome和opera先進3.3.5

Fiddle (without problem)

所以我的猜測是有一個selector有transform屬性，導致該問題，並強制模式不開放在它的默認位置。

例如;如果我添加自定義transform: translateX(-25%) translateY(0%);屬性，該屬性會覆蓋模態默認的transform屬性，模式將精確顯示在快照中顯示的位置。

Fiddle (problem reproduced)

所以溶液或更可能是黑客創建一個自定義選擇defaultposition，將其添加在HTML模式，設置默認模式transform: translateX(0%) translateY(5%);性能和只是爲了安全起見，加!important規則了。

HTML

<div id="contact-dialog" class="modal fade defaultposition" role="dialog">

CSS

.defaultposition { 
    -webkit-transform: translateX(0%) translateY(5%) !important; 
    -moz-transform: translateX(0%) translateY(5%) !important; 
    -ms-transform: translateX(0%) translateY(5%) !important; 
    transform: translateX(0%) translateY(5%) !important; 
}

Fiddle

所以，無論造成問題的原因，而不是讓模式顯示在它的默認位置將被覆蓋和模式將顯示在它的默認位置。

來源

2015-09-26 20:38:48 Shehary

分頁後顯示.bs.modal

回答

相關問題