分页后显示.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

回答

相关问题