Unable to properly shut the sliding-over modal

I have implemented a customized version of the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on my webpage. However, I am facing difficulty in closing it using another link. Any assistance on this matter would be highly appreciated. jsfiddle: http://jsfiddle.net/qu80jto2/

HTML:

<nav class="modal modal-vertical modal-right" id="modal">
    <h1>CONTENT</h1>
</nav>

<h1 id="showRight">OPEN</h1>
<h1 id="hideRight">CLOSE</h1>

JQUERY:

<script>
    var 
        menuRight = document.getElementById( 'modal' ),
        body = document.body;

    showRight.onclick = function() {
        classie.toggle( this, 'active' );
        classie.toggle( menuRight, 'modal-open' );
        disableOther( 'showRight' );
    };

    function disableOther( button ) {
        if( button !== 'showRight' ) {
            classie.toggle( showRight, 'disabled' );
        }
    }
</script>

CSS:

.modal {
    background: yellow;
    position: fixed;
}

.modal-vertical {
    width: 60%;
    height: 100%;
    top: 0;
    z-index: 1000;
}

.modal-right {
    right: -60%;
}

.modal-open {
    right: 0px;
}

.modal-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.modal,
.modal-push {
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

Answer №1

Check out this sample code:

<nav class="modal modal-vertical modal-right" id="modal">
    <h1>CONTENT</h1>
        </nav>

        <h1 id="showRight">OPEN</h1>
        <h1 id="hideRight">CLOSE</h1>

        <script>
            var 
                menuRight = document.getElementById( 'modal' ),
                body = document.body;


            showRight.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuRight, 'modal-open' );
                disableOther( 'showRight' );
            };

            function disableOther( button ) {
                if( button !== 'showRight' ) {
                    classie.toggle( showRight, 'disabled' );
                }
            }

            hideRight.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuRight, 'modal-open' );
                disableOther( 'hideRight' );
            };

            function disableOther( button ) {
                if( button !== 'hideRight' ) {
                    classie.toggle( hideRight, 'disabled' );
                }
            }
        </script>

CLICK HERE FOR A LIVE DEMO

Answer №2

When you want to trigger the overlay to open or slide-in upon clicking on Open, and also close or slide-out upon clicking on Close, this solution will work for you:


showRight.onclick = function() {
    classie.removeClass(hideRight, 'active');
    classie.addClass(this, 'active');
    classie.addClass(menuRight, 'modal-open');
    disableOther('showRight');
};

hideRight.onclick = function() {
    classie.removeClass(showRight, 'active');
    classie.addClass(this, 'active');
    classie.removeClass(menuRight, 'modal-open');
    disableOther('hideRight');
};

For a live demo, check out this JSFiddle link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with changing the selected value in JQuery?

I'm attempting to use jQuery to set the select option, but I'm encountering an issue. It is setting the value properly, but the text is not being updated. I've experimented with .prop('selected',true), .attr('selected',t ...

Guide on capturing JSON objects when the server and client are both running on the same system

I created an HTML page with a form that triggers JavaScript when submitted using the following event handler: onClick = operation(this.form) The JavaScript code is: function operation(x) { //url:"C:\Users\jhamb\Desktop\assignmen ...

What is the method for displaying a canvas scene within a designated div element?

I need help displaying a scene inside an existing div on my webpage. Whenever I try to do this, the canvas is always added at the top of the page. I attempted to use getElementById but unfortunately, it didn't work as expected. What could I be overlo ...

The shown.bs.tab event is causing an issue where the previous active tab cannot be retrieved

Reference from https://getbootstrap.com/docs/4.0/components/navs/#events states that I am utilizing e.relatedTarget in the shown.bs.tab event to retrieve the previous active tab for applying some CSS styles. However, currently, e.relatedTarget is returning ...

Display errors in Jqgrid retrieved from JSON data

I am facing an issue where I need to display error messages by fetching information from a JSON response. Whenever we make changes (add/edit) in jgrid, we expect a JSON response with data. If there is an error in adding something, the response will include ...

Displaying a <div> element within a :before pseudoelement

Implementing the use of :before to insert an icon font into a div for a CSS3 hover state. I am looking to incorporate a div within the <a> tag in order for both elements to function as links: <a href="#set-4" class="column product hi-icon product ...

Shift the element within the div towards the left side

I am trying to create an animation for an element that moves to the left when hovered over, but the code I thought was correct doesn't seem to be working in my fiddle. Here is the link to the fiddle I created: https://jsfiddle.net/feb8rdwp/3/ Based ...

Is there a way to showcase a single HTML canvas across multiple div elements?

I'm currently developing a web application that includes a Google Maps feature in two different tabs using Twitter Bootstrap. I am exploring options to have one canvas element that can be displayed in both tabs with varying dimensions. One idea is to ...

polygon with five or more sides

Can divs be created with shapes such as five or six corners? I am looking to create clickable zones on a map and any alternative methods would be greatly appreciated. ...

Enhance your webpage with a stunning background video

I'm trying to add a background video that covers the entire screen but maintains a height of 400px, similar to the one shown here. Is there a way to achieve this without using JavaScript? Below is the HTML code I currently have: <div class="pr ...

Utilizing a drop-down menu to display two distinct sets of data tables

After spending some time on my WordPress site, I've encountered a problem that has me feeling stuck. Currently, I have two functioning datatables which are displaying one on top of the other on the page. Additionally, there is a dropdown selection box ...

What is the best way to dynamically retrieve a URL and utilize it as a hyperlink using jQuery?

Is there a way to retrieve the current URL and use it as a link in jQuery? For example, if my browser is currently on page mysite.com/index.php?page=post&see=11, I would like to use this URL in my link and append /new/ after the domain name, like so: ...

Are there any small JavaScript libraries designed for handling HTML5 history?

I experimented with AngularJS and found it to be a powerful but heavy framework, with a size of over 100k. Is there a more lightweight JavaScript framework specifically for managing HTML5 webpage history in an MVC project? What are your thoughts on using ...

Modifying content on links that are dynamically created

I have some dynamically added link elements that are initially hidden from the page. These links are generated by a third party telerik control, and I need to change the text of these links using jQuery. I have created a rule (selector) that targets the ...

What is the best way to display a Base64 image in a server-side DataTable?

This HTML code is designed to load server-side data into a table. The data is retrieved from the controller using AJAX requests. <script type="text/template" id="tablescript"> <td><%=Name%></td> <td><%=PhoneNumber%> ...

Problem occurs when tab links vanish after clicking on another part of the website

Exploring the world of Javascript as a newcomer has been quite an adventure, but I've encountered a hurdle with tab links on my website. Everything seems to be working fine – the links cycle through and display the correct content. However, when it ...

Clearing a textarea in jQuery

I'm experiencing an issue that I can't seem to resolve on my own. Any assistance would be greatly appreciated. My function designed to clear a textbox upon click doesn't seem to be working correctly: $(function() { $('textarea#co ...

Is it possible to utilize AJAX to load the URL and then extract and analyze the data rather than

I had originally created a web scraping method using PHP, but then discovered that the platform I was developing on (iOS via phone gap) did not support PHP. Fortunately, I was able to find a solution using JS. $(document).ready(function(){ var container ...

What is the best way to code an HTML block with jQuery?

Could someone guide me on creating the following using jQuery: <div class="card"> <img src="images/cat6.jpg" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Watson</b></h4> ...

Using jQuery to define and apply style attributes

I'm currently working on a script that will add a left and right border to a button in a row of 3 buttons when that specific button is clicked. The goal is for the borders to remain while the button is active, and disappear once another button is clic ...