Prevent screen scrolling while opening modal

Question

Prevent screen scrolling while opening modal

Navigation

#1 by (4 votes)

2

I'm creating a single-page site with five sessions, each one scripting the screen size. In one of these sessions, you have a button that will open a modal that will be the front of all the contents of all the sessions. With the modal open, it is still possible to see the background, and the ideal would be that the background did not scroll, only the modal content, and when closing modal OR get to the end of scrolling, page scrolling was activated again .

That is, when clicking the modal button, scrolling is disabled and when you close the modal or reach the end of it, scrolling is activated.

I put an event on the button that makes the content not move, as desired, but when closing the modal I could not cancel the function.

HTML:

  <div id="fullpage">
     <div id="section1" class="section">
        <h1>Sessão 1</h1>
     </div>

     <div id="section2" class="section">
        <h1>Sessão 2</h1>
        <p>Sessão onde o evento acontece</p>
        <button>Botão</button>
     </div>

     <div id="section3" class="section">
        <h1>Sessão 3</h1>
     </div>
  </div>
  <div id="modal">
     <div class="fundo"></div>
     <div class="modal-content">
        <div class="fundo_close"></div>
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>

CSS:

body,html{padding:0;margin:0;}
/* Section styles */
.section{text-align: center;}
.section h1,.section p {color: #333333;margin: 0;}
/* Janela Modal */
#modal{display:none;position:fixed;width:100%;height:100%;top:0;left:0;z-index:101;}
.fundo{background:rgba(0,0,0,.8);width:100%;height:100%;top:0;left:0;position:absolute}
.fundo_close{width:100%;height:100%;top:0;left:0;position:absolute}
.modal-content{width:100%;height:100%;top:0;left:0;position:absolute;}
.item{float:left;position:relative;width:100%;height:50px;margin:15px;background:#fff;z-index:1;}

JQuery:

$(function() {
    // Initialize fullPage
    $('#fullpage').fullpage({
        //Scrolling
        css3: true,
        scrollingSpeed: 1400,
        autoScrolling: false,
        fitToSection: false,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: true,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,

        //Navigation
        navigation: true,
        navigationTooltips: ['First section', 'Second section', 'Third section'],
        sectionsColor: ['#f1c40f', '#e67e22', '#c0392b'],
        onLeave: function(index, nextIndex, direction) {
            // Remove the inactive class from all arrows
            $('#fp-nav > span').removeClass('inactive');

            // Add inactive class if needed
            if (nextIndex == 1) {
                $('#fp-nav > span.prev').addClass('inactive');
            } else if (nextIndex == $('.fp-section').length) {
                $('#fp-nav > span.next').addClass('inactive');
            }
        }
    });

    // Add previous and next arrows to the fullPage navigation
    $('#fp-nav').prepend('<span class="prev inactive">&#8593;</span>')
            .append('<span class="next">&#8595;</span>');

    // Re-center the fullPage navigation
    $('#fp-nav').css({ 'margin-top': '-' + ($('#fp-nav').height() / 2) + 'px' });

    // Add actions to the arrows
    $('#fp-nav').find('span.prev, span.next').on('click', function() {
        if ($(this).hasClass('prev')) {
            $.fn.fullpage.moveSectionUp();
        } else {
            $.fn.fullpage.moveSectionDown();
        }
    });
});
// Abre Janela Modal
$("button").click(function(){
    $("#modal").show();
    //Pausa a Rolagem do conteúdo atrás da modal
    $("body").stop().on({
        'mousewheel': function(e) {
            e.preventDefault();
            e.stopPropagation();
        }
     })
});
//Fecha Janela Modal
$(".fundo,.fundo_close").click(function(){
    $("#modal").hide();
});

Look at the JSFiddle with the code.

javascript jquery

asked by anonymous 30.03.2015 / 15:47

1 answer

How to check if a session exists (CodeIgniter) ".exe has stopped working"

score 4 · Accepted Answer

One solution is to put the overflow of the page hidden when modal is opened, and revert when it is closed.

When opening

$("button").click(function(){

    $("#modal").show();
    $("html,body").css({"overflow":"hidden"});
});

When closing

$(".fundo,.fundo_close").click(function(){
    $("#modal").hide();
    $("html,body").css({"overflow":"auto"});
});

At the end of the scroll

$('#modal .modal-content').bind('scroll', function() {

    var $conteudo = $(this);

    if ($conteudo.scrollTop() + $conteudo.innerHeight() >= this.scrollHeight) {
        $("#modal").hide();
        $("html, body").css({"overflow":"auto"});
    }
});

Note: In order to be able to detect the end of scroll within the modal, you must declare in the css the overflow that works in conjunction with the definition of a height, something you already have in your example:

.modal-content{
    overflow:auto;
}

See example in this clone of your JSFiddle .