javascript - 尝试让 .modal ('show' )从右侧而不是顶部滑动元素

Question

我的任务是将模态的进入方向从(明显的)默认顶部更改为从右侧出现。这是目前的js:

$(function () {
        $('#FbButtonLink').on('click', function () {
            $('.modal-content').load(this.href, function () {
                $.ajaxSetup({ cache: false });
                $.validator.unobtrusive.parse('#FeedbackForm');
                $('#Fb-ErrorMessage').hide();
                $('#modal-container').modal('show');
                $('[data-toggle="dropdown"]').parent().removeClass('open');
                $('#FeedbackForm').submit(function () {
                    if ($('#FeedbackForm').valid()) {
                        $.ajax({
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (result) {
                                if (result.success) {
                                    $('#modal-container').modal('hide');
                                } else {
                                    $('#Fb-ErrorMessage').text("System error, please try again.");
                                    $('#Fb-ErrorMessage').show();
                                }
                            },
                            error: function () {
                                $('#Fb-ErrorMessage').text("Network error, please try again.");
                                $('#Fb-ErrorMessage').show();
                            },
                        });
                        return false;
                    }
                });
            });
            return false;
        });
    });

$('#modal-container').on('show.bs.modal', function () {
    $('#modal-container').show('slide', { direction: 'right' });
});

$('#modal-container').on('hide.bs.modal', function () {
    $(this).hide('slide', { direction: 'right' }, 'slow');
});

我没有编写这段代码，但我已经看它有一段时间了(并搜索“.modal('show')”)，但我无法理解它。

<div id="FbLink">
    <a id="FbButtonLink" href="/CL/Home/AddFeedback" class="btn button-big">
         <span>Feedback</span>
         <span class="fa fa-commenting">
             <svg>
                 <use xlink:href="~/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-commenting" />
             </svg>
         </span>
    </a>
</div>
<div id="ModalPartial">
    <div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
             <div class="modal-content">
             </div>
        </div>
    </div>  
</div>

.modal('show'); 是如何实现的？行调用 .on('modal.bs.show') 函数吗？或者不是吗？因为，目前，此代码仍然具有从顶部出现的反馈表单元素，而不是按预期显示在右侧。

任何指示，非常感谢。

Answer 1

使用下面的代码使模式从右侧显示:-

.modal.fade:not(.in) .modal-dialog {
-webkit-transform: translate3d(25%, 0, 0);
 transform: translate3d(25%, 0, 0);
}