Bootstrap Modal Popup отображается как двойной слой в ASP.NET и смещает содержимое при всплывающих окнах

У меня никогда раньше не было опыта работы с модальным всплывающим окном Bootstrap. Но в недавней покупке темы, которая была полностью основана на начальной загрузке, они также продемонстрировали модальные всплывающие окна, которые отлично работали на их HTML-странице. Но когда я интегрирую свою главную страницу, все работает нормально. Но само по себе модальное всплывающее окно двоится, как вы можете видеть на изображении ниже введите здесь описание изображения

Я понятия не имел, почему он ведет себя так, когда все на странице HTML и странице ASPX одинаковы. Кроме того, когда появляется модальное всплывающее окно, на странице происходит смещение, подобное тому, что происходит, или небольшой прыжок вправо, когда появляется модальное всплывающее окно.

Вот код моего модального всплывающего окна

 <div class="modal fade bs-example-modal-sm" id="mytestmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>

А вот и код кнопки

 <button class="btn btn-info btn-block" data-toggle="modal" data-target="#mytestmodal">
    <i class="fa fa-copy"></i>| Clone Data
 </button>

asp.net bootstrap-modal twitter-bootstrap-3 master-pages
person Sandeep Thomas    schedule 26.02.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Для этого прыжка отредактируйте его CSS

body.modal-open{
  overflow: visible !important;
}
person sap    schedule 26.02.2014
comment
Спасибо, друг, это решило мою проблему с переключением передач. Но вы хоть представляете, почему это модальное окно с двойной рамкой? - person Sandeep Thomas; 26.02.2014

arrow_upward
0
arrow_downward

Боковое смещение — это известная открытая ошибка в Bootstrap.
Предполагая, что ваше модальное окно не недостаточно долго для прокрутки, вы можете попробовать предполагаемый обходной путь:

.modal {
  overflow-y: auto;
}

.modal-open {
  overflow: auto;
}
person cvrebert    schedule 26.02.2014