Как вывести модальное окно Bootstrap в правом верхнем углу экрана?

Question

[AlexSer]

Как вывести модальное окно в правом верхнем углу экрана?

<div id="myModalBox" class="modal fade" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Заголовок модального окна -->

            <!-- Основное содержимое модального окна -->
            <div class="modal-body" style="padding: 0; margin: 0;">
                <div class="alert alert-danger" role="alert" style="margin: 0;">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                        Удаление не возможно, так как статус направления изменен!
                </div>
            </div>
            <!-- Футер модального окна -->

        </div>
    </div>
</div>

Answer 1

[Robert-critical-thoughts]

position: relative; у body
position: absolute; top: 0px; right: 0; у модального окна

Comments

[Erl]

да можно даже без relative обойтись

[AlexSer]

Robert-critical-thoughts не работает, так же с верху и по центру открывается

[Robert-critical-thoughts]

AlexSer, Сайт на локальном сервере? Скинуть можете?

[AlexSer]

Robert-critical-thoughts, на локалке

[Robert-critical-thoughts]

AlexSer, откройте devtools(f12), найдите стили модального окна и скиньте их сюда. Либо попробуйте добавить!important к right:0; мало ли, может быть где-нибудь перебивают стили бутстрапа.

[AlexSer]

Robert-critical-thoughts,

:before, ::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
элемент {
    display: block;
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.fade.in {
    opacity: 1;
}
.modal {
    position: absolute;
    top: 0;
    right: 0 !important;
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

[Robert-critical-thoughts]

.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;

------ left: 0; уберите

z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;

Или оставьте только top:0; right: 0;

[AlexSer]

Robert-critical-thoughts, Спасибо получилось!!!