Moving Bootstrap 3 Modal left in Yii2

Question

I have a Bootstrap 3 Modal that conditionally needs to move to the left so that data on the main page can still be seen when the dialog is open.

If a <div> appears in the modal that has class="modal-left", the modal should appear to the left of the window. Otherwise, it should be rendered as normal on the top center of the screen.

I am using the Yii2 Modal widget.

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

The content in the modal is appended using Ajax. The Javascript that appends the content looks like this:

$(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');
    });
});

The actual positioning code is in the view file:

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

On my test system this works ok, although a little clunky. I had to use shown.bs.modal because the <div class="modal-left"> does not exist until the .load() method completes.

The problem is that on the production server (an off-site VPS), it does not work correctly. It appears to be one move behind, so I am assuming the load is not really complete before the shown even fires. Should I be checking for a different event, or does anyone have other suggestions?

Thanks in advance,

Joe

Michal Hynčica · Accepted Answer · 2022-03-14T08:42:33.907

In your code you start opening modal then you start loading its content right after. The modal showing doesn't wait for content loading. And, the content loading doesn't wait for modal either. So it's basically gamble what will be finished first.

You can use load() method's complete callback to start showing modal after its content has been 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');
});

The other option is bit more complicated. You can create two Promises, resolve one in shown.bs.modal event handler and another in load's complete callback. You can run the positioning code when both promises are resolved.

Moving Bootstrap 3 Modal left in Yii2

1 Answers1