shown.bs.modal 后分页

Question

我在页面中使用了一些模式，但每当我打开模式（或触发 shown.bs.modal 事件）时，整个页面的宽度都会变得有点短。这是发生了什么：

我点击“İletişim”元素：

我看到它在后台坏了：

当我这样做几次时会发生这种情况：

这些是我使用的代码：

<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");
    });
});

我该如何解决这个问题？

Answer 1

与OP讨论后；

首先，当使用 [=15] 在最新版本的 firefox、chrome 和 opera 中打开模式时，我无法使用提供的相关代码重现问题=] 和 bootstrap 版本 3.0.0 到 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

因此，无论是什么原因导致问题并且不让模态框在其默认位置显示，都将被覆盖，模态框将在其默认位置显示。

shown.bs.modal 后分页

Page Breaks After shown.bs.modal

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3