خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

multiple modal windows, behaviour on close

Hi there,

I'm pretty new to coding, but I'll try to be as descriptive as i can. I read the sticky on how to post a question here. Please let me know, if I missed anything.

My Problem: I have a site with multiple modal windows, based on the Nifty Modal Window Effects by codrops.com. Following some threads on stackoverflow I added a function to make the body not scrollable while the modal is open. To avoid "site jumping effects" when using overflow: hidden I made a substitute scrollbar for the body while the modal window is open. Additionally I added a function to let the body stay in position when the modal is opened (opposed to jumping to top of page). I found all this on different sources on the internet, so nothing of this is my own.

Everything is working fine, except for one instance: If I have multiple modal windows on my page (not opened at the same time) it somehow screws up the function to let the body stay in position. This means, if I close the modal window, the site will jump to the top, but only if I close it by clicking on the overlay, not if I use the close button. Also, this only happens after I opened the second modal window (meaning i open the first, close it, then open the second. the order is irrelevant). If I stick to one modal window after page refresh, everything is working fine.

So here is the code:

Code:
var ModalEffects = (function() {

        function init() {

                var overlay = document.querySelector( '.md-overlay' );

                [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

                        var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
                                close = modal.querySelector( '.md-close' );

                        function removeModal( hasPerspective ) {
                                classie.remove( modal, 'md-show' );
                                var scrollTop = parseInt($('html').css('top'));
                                $('html').removeClass('noscroll').css('top','');
                                $('html,body').scrollTop(-scrollTop);

                                if( hasPerspective ) {
                                        classie.remove( document.documentElement, 'md-perspective' );
                                }
                        }

                        function removeModalHandler() {
                                removeModal( classie.has( el, 'md-setperspective' ) );
                        }

                        el.addEventListener( 'click', function( ev ) {
                                classie.add( modal, 'md-show' );
                               
                                if ($(document).height() > $(window).height()) {
                                        var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
                                        if (scrollTop < 0) { scrollTop = 0; }
                                        $('html').addClass('noscroll').css('top',-scrollTop);       
                                }

                                overlay.removeEventListener( 'click', removeModalHandler );
                                overlay.addEventListener( 'click', removeModalHandler );

                                if( classie.has( el, 'md-setperspective' ) ) {
                                        setTimeout( function() {
                                                classie.add( document.documentElement, 'md-perspective' );
                                        }, 25 );
                                }
                        });

                        close.addEventListener( 'click', function( ev ) {
                                ev.stopPropagation();
                                removeModalHandler();
                        });

                } );

        }

        init();

})();
the css:
Code:
html.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}
And the relevant html
Code:
<div class="md-modal md-effect-16" id="modal-16">
        <div class="md-content">
                <div>
                ...
                <button class="md-close">close</button>
                </div>
        </div>
</div>
<div class="modcontainer"> <!-- the overlay -->
<button class="md-trigger" data-modal="modal-16">open</button>
</div>
I hope I made myself clear. I'm also not a native speaker so I apologize for bad grammar :).

برچسب: نویسنده: آیلین رضوانی تاريخ: جمعه 15 دی 1396 ساعت: 0:26

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه