在 Yii2 中向左移动 Bootstrap 3 个模态

Question

我有一个 Bootstrap 3 Modal，它有条件地需要向左移动，以便在打开对话框时仍然可以看到主页上的数据。

如果 <div> 出现在具有 class="modal-left" 的模态中，模态应该出现在 window 的左侧。否则，它应该在屏幕的顶部中心正常呈现。

我正在使用 Yii2 Modal 小部件。

use yii\bootstrap\Modal;
Modal::begin([
    'header' => '<h4 id="title"></h4>',
    'options' => [
        'id' => 'modalCreate',
    ],
]);
echo "<div class=modal-body id='modalContent'></div>";
Modal::end();

模式中的内容使用 Ajax 附加。附加内容的 Javascript 如下所示：

$(function(){
    $(document).on('click', '.btn-modal', function() {
        var modal = $('#modalCreate').modal('show');
        modal.find('#modalContent').load($(this).attr('value'));
        var title = $(this).attr('data-title');
    });
});

实际定位代码在视图文件中：

$('#modalCreate').on('shown.bs.modal', function () {
    if ($('.modal-left').length) { 
        $('.modal-dialog').css("margin-left", '30px');
    } else {
        $('.modal-dialog').css("margin-left", 'auto');
    }
});

在我的测试系统上这工作正常，虽然有点笨拙。我不得不使用 shown.bs.modal 因为 <div class="modal-left"> 在 .load() 方法完成之前不存在。

问题是在生产服务器上（异地 VPS），它无法正常工作。它似乎落后了一步，所以我假设在显示的甚至触发之前负载还没有真正完成。我应该检查其他事件，还是有人有其他建议？

提前致谢，

乔

Answer 1

在您的代码中，您开始打开模式，然后立即开始加载其内容。模态显示不等待内容加载。而且，内容加载也不会等待模态。所以基本上是在赌什么先完成。

您可以使用 load() 方法的完整回调在其内容加载后开始显示模式：

$(document).on('click', '.btn-modal', function() {
    var modal = $('#modalCreate');
    modal.find('#modalContent').load($(this).attr('value'), function() {
        modal.modal('show')
    });
    var title = $(this).attr('data-title');
});

另一个选项有点复杂。您可以创建两个 Promises，在 shown.bs.modal 事件处理程序中解析一个，另一个在加载的完成回调中解析。当两个 promise 都解决时，您可以运行定位代码。

在 Yii2 中向左移动 Bootstrap 3 个模态

Moving Bootstrap 3 Modal left in Yii2

css

jquery

bootstrap-modal

yii2