Bootstrap 4 Модальный удаленный URL: появляется только фон - PullRequest
Новая
       19

Bootstrap 4 Модальный удаленный URL: появляется только фон

0 голосов
/ 06 июля 2019

Я пытаюсь загрузить некоторый контент с того же локального хоста в модальный. Это моя ссылка: 

<a href="#" data-remote="/Applications/Applications/RoleDetails?Id=800fd767-98bb-42f1-9183-377646b826bb&amp;ApplicationId=300e235f-2e4e-4c64-9ae7-d1ac09846afa" data-toggle="modal" data-target="#modal-container">SystemAdministrator</a>

Это мой заголовок: 

    <script src="~/jquery/jquery.min.js"></script>
    <script src="~/jquery-validate/jquery.validate.js"></script>
    <script src="~/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/jqueryui/jquery-ui.js"></script>
    <script src="~/popper.js/umd/popper.js"></script>
    <script src="~/twitter-bootstrap/js/bootstrap.js"></script>

В начале тела я вставляю этот пустой div с моим модальным идентификатором: 

<div id="modal-container"></div>

Это модал, который я хочу загрузить в модал-контейнер: 

@model App.Data.ViewModels.ApplicationRoleDetailsViewModel
<script>
    $(document).ready(function () {

    });
    $(document).on("submit","#modal",function (e) {
        e.preventDefault();
        var form_data = $(this).serialize();
        $.ajax({
            url: "@Url.Action("SaveRole", @ViewContext.RouteData.Values["controller"].ToString())",
            method: "POST",
            data: form_data,
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (result) {
                if (result.success) {
                    $(document).off("submit");
                    $(document).off("submit", "#save");
                    $('#modal').off('#save');
                    $.modal.close();
                    return;
                }
                $.each(result.errors, function (index, item) {
                    // Get message placeholder
                    var element = $('[data-valmsg-for="' + item.propertyName + '"]');
                    element.empty();
                    // Update message
                    element.append($('<span></span>').text(item.errorMessage));
                    // Update class names
                    element.removeClass('field-validation-valid').addClass('field-validation-error');
                    $('#' + item.propertyName).removeClass('valid').addClass('input-validation-error');
                });
            }
        });
        return false;
    });
</script>
<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="col-sm-12">
                <div class="modal-header">

                    @if (Model.Id == null)
                    {
                        <h5 class="modal-title">Add Role</h5>
                    }
                    else
                    {
                        <h5 class="modal-title">Edit Role</h5>
                    }
                </div>
                <hr />
            </div>
        </div>
    </div>
</div>

Я прочитал, что Bootstrap 4 убрал поддержку удаленной загрузки, так что это мой обходной путь: 

$('body').on('click', '[data-toggle="modal"]', function () {
    $($(this).data("target") + '#modal-container').load($(this).data("remote"));
});

Проблема в том, что теперь по какой-то причине, когда я нажимаю на ссылку, появляется только мой фон. Мой контент загружается в модальный режим, и когда я проверяю его в отладчике, класс .modal отображает: none; в теме. Если я попытаюсь изменить его, чтобы отобразить: блок; это появляется, но я не могу щелкнуть прочь.

Пожалуйста, помогите. Я пытался это в течение нескольких дней.

EDIT:

Просто хочу сказать, что когда я пробовал это с обычным модалом со статическим контентом, это работало без проблем.

...