带有页面滚动条的jQuery模式滚动

Question

When a jQuery modal has loaded... how do you make it so the page scrollbar scroll the modal and not the page?

See this example on 123reg... https://www.123-reg.co.uk/order/domain?domain=somedomain.co.uk&is=1 and click '.co.uk taken' then scroll.

If you then close the modal and click '.uk.com Available' the modal is shorter and the page scrollbars are disabled until closing the modal.

Could anyone give an example how this works?

Thanks in advance! :)

Answer 1

Use position:absolute instead of position:fixed in your main modal container class

.modal_name {       
    position: absolute;        
}

Answer 2

Just add this style to your stylesheet and it should work:

.modal-open {
   overflow: inherit; 
}

Answer 3

This is happening because of "modal-scrollable" class which is applied at the parent div of the modal-popup . This "modal-scrollable" class has style "overflow:auto and overflow:y-scroll" . If you remove these styles the page scroll bar will be no more present and you won't be able to scroll down the modal-popup then . The modal-poup is bigger than the body height, so overflow style works here . For the second popup , it's not bigger than the body height , so scroll doesn't comes over there . 'overflow' style only works there where the element is reaching beyond the specified limit ( like div has max-height:450px and when the content in the div make it to reach beyond 450 px then it will show scroll . The condition is overflow:auto or overflow:y-scroll is added with it) .

You can handle these things via jquery too .Just to make you better understand I have created two function ShowModal and 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 
}

Hope my answer help you !!