jQuery модальная прокрутка со страницами прокрутки страницы

Question

Когда загружен модаж jQuery ... как вы это делаете, чтобы прокрутка страницы прокручивала модальную, а не страницу?

Посмотрите этот пример на 123reg ... https://www.123-reg.co.uk/order/domain?domain=somedomain.co.uk&is=1 и нажмите «.co.uk take», затем прокрутите.

Если вы затем закроете модальный и нажмите «.uk.com Доступно», то модальная короче, а полосы прокрутки страницы будут отключены до закрытия модального.

Может ли кто-нибудь привести пример, как это работает?

Заранее благодарен! :)

Answer 1

Использование position:absolute вместо position:fixed в главном классе модальных контейнера

.modal_name {  
    position: absolute;   
} 

Answer 2

Просто добавьте этот стиль в таблице стилей, и он должен работать:

.modal-open { 
    overflow: inherit; 
} 

Answer 3

Это происходит из-за «модальный -scrollable ", который применяется в родительском div модального всплывающего окна. Этот класс «модально прокручиваемый» имеет стиль «переполнение: авто и переполнение: y-scroll». Если вы удалите эти стили, полоса прокрутки страницы будет больше не присутствовать, и тогда вы не сможете прокручивать вниз по модальному всплывающему окну. Модальный-poup больше, чем высота тела, поэтому стиль переполнения работает здесь. Для второго всплывающего окна это не больше, чем высота тела, поэтому прокрутка туда не появляется. Стиль «переполнения» работает только там, где элемент выходит за пределы указанного предела (например, div имеет максимальную высоту: 450 пикселей, а когда содержимое в div позволяет достичь более 450 пикселей, тогда он будет показывать прокрутку. Условие переполнено: auto или overflow: с ней добавляется y-scroll).

Вы можете обрабатывать эти вещи с помощью JQuery слишком .Just, чтобы лучше понять, я создал две функции ShowModal и HideModal: -

<div class="modal" id="popupModal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header ">     
       <button type="button" class="close1" data-dismiss="modal" aria-hidden="true">&times;</button> 
      </div> 
      <div class="modal-body"> 
       <p>Something to be written<p>   
     </div> 
    </div> 
</div> 

Script

function ShowModal() 
{ 
$("#popupModal").modal('show'); //this will show the page scroll bar for modal popup only . This is handled by bootstrap itself 
$('body').css({overflow:'hidden'); // this will hide the body scroll bar 
} 

function HideModal(){ 
$("#popupModal").modal('hide'); 
$('body').css({overflow:'auto'}); //this will show the scroll bar 
} 

Надежда мой ответ вам помочь! !