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讨论后;

首先，当我使用{{1}在最新版本的firefox，chrome和opera中打开模态时，我无法使用提供的代码重现问题}和引导版本jQuery 2.1.0最多3.0.0

Fiddle (without problem)

所以我的猜测是3.3.5有selector属性导致问题，并强制模态未在其默认位置打开。

e.g;如果我添加覆盖模态默认transform属性的自定义transform: translateX(-25%) translateY(0%);属性，则模式将准确显示在相关快照中显示的位置。

Fiddle (problem reproduced)

因此，解决方案或更有可能的方法是创建自定义选择器transform，将其添加到模式HTML中，设置默认模态defaultposition属性，只是为了安全起见，添加transform: translateX(0%) translateY(5%);也是统治。

HTML

!important

CSS

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

Fiddle

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

分页后显示.bs.modal

1 个答案: