Модальное окно Bootstrap не отображается правильно и работает неправильно в приложении ASP. NET MVC

Question

Из представления (скажем, MyView.cs html) в приложении ASP. NET MVC Отображается модальное окно _MyConfirmModalWnd.cs html. Я поместил модальное окно в папку Views \ Shared.

Отображается модальное окно, но некоторые вещи работают не так:

• Внешний вид не отображается правильно
• Кнопка креста неправильно размещается в окне
• Когда я нажимаю на кнопку креста, она не работает, модальное окно не закрывается.
• Модальное окно не находится вертикально и горизонтально по центру на экране, несмотря на то, что я указываю на использование модального диалогового класса.

Мое модальное окно показано ниже:

вместо того, чтобы быть похожим на то, что показано в bootstrap документации :

Модальное окно _MyConfirmModalWnd.cs html:

<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Modal body              
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>

Просмотр MyView.cs html (код в разделе скрипта):

function askForConfirmation() {

    var success = function () {
                     // Do something on button 'Yes' clicked
                  };

    var cancel = function () {
                    // Do something on button 'No' clicked
                 };                 

    var title = "Caution!";
    var message = "You are about to invoice,\nDo you want to continue?";

    showConfirmation(title, message, success, cancel);
}

showConfirmation = function (title, message, success, cancel) {        
    var modal = $("#confirmModalDialog");
    modal.find(".modal-title").html(title).end()
         .find(".modal-body").html(message).end()
         .modal({ backdrop: 'static', keyboard: false })
         .on('hidden.bs.modal', function () {
             modal.unbind();
         });
    if (success) {
        modal.one('click', '.modal-footer .btn-primary', success);
    }
    if (cancel) {
        modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel);
    }
};

Может быть ... Должен ли я импортировать некоторые указанные c javascript исходные файлы или css файлы в моем модальном представлении _MyConfirmMo dalWnd.cs html?

ОБНОВЛЕНИЕ : я установил поля и отступ в 0 в модальном окне _MyConfirmModalWnd.cs html, как показано ниже:

<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="margin:0;padding:0">
    <!-- Rest of the stuff -->
</div>

... и теперь модальное окно выглядит нормально, кроме кнопки 'x':

Однако модальное окно не центрируется вертикально и горизонтально Экран, несмотря на указание его с помощью модального диалогового центра. Почему это не по центру на экране? я что-то пропустил?

ОБНОВЛЕНИЕ 2 : Наконец, я сделал некоторые изменения в модальном окне:

• У меня есть только set style = "padding: 0px «для внешнего div. Поля: 0px не требуется.
• Я установил style = "margin-top: -30px" для кнопки закрытия

Ниже кода:

<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="padding:0px">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-30px">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Modal body              
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>

Теперь модальное окно выглядит ниже:

Осталось сделать:

• Центрировать модальное окно вертикально и по горизонтали на экране.

ОБНОВЛЕНИЕ 3 :

Я сделал немного больше настроек, изменив стиль. Я добавил ниже атрибуты стиля для внешнего div:

• margin-left: 0px
• left: 42%

Дополнительно я установил минимум ширина:

• минимальная ширина: 15%

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

Для центрирования по вертикали я должен установить атрибут style top: 40%, но после добавления этого атрибута модальное окно не отображается. Однако если я открою инструменты разработчика, с их открытыми, в режиме отладки, то появится модальное окно. Я не понимаю, почему модальное окно ведет себя так, когда я добавляю атрибут top: 40% .... Есть идеи?

ниже окончательного кода:

<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="padding:0px;margin-left:0px;left:42%;min-width_15%"> <!-- NOTE:If I add top:40% then modal window is not shown,it is not being opened. It is only shown in debug mode when I make visible developer tools window -->
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-30px">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Modal body              
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>