How to change the incoming side of the modal overlay animation Css JS HTML

Question

How to change the incoming side of the modal overlay animation Css JS HTML

Navigation

#1 by (0 votes)

0

I have this code, I just need to make the modal enter the right side of the screen (right - left) the way it does on the contrary

CSS

.overlay{    
height: 100%;
width: 0;
position: fixed; 
z-index: 1; 
left: 0;
top: 0;
background-color: #944743; 
background-color: #944743; 
overflow-x: hidden; 
transition: 1s; 
}

JS

function openNav() {
    document.getElementById("Medium").style.width = "100%";
}
function closeNav() {
    document.getElementById("Medium").style.width = "0%";
}

HTML

<button onclick="openNav()" class="btn btn-primary "><i class="fas fa-arrow-left"></i> Go somewhere</button>
<div id="Medium" class="overlay">

                    <!-- Button to close the overlay navigation -->
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

                    <!-- Overlay content -->
                    <div class="overlay-content">
                        <h1>hola mundo</h1>

                    </div>

                </div>

javascript html5 html css3 css

asked by Aaron M Fonseca 07.07.2018 в 08:18

source

1 answer

Problems with Selenium + Python (My script detected as malware in Chrome and selenium.webdriver 'has no attribute' FireFox) How to turn on xampp in conjunction with a desktop program? [closed]

score 0 · Accepted Answer

What you have to do is that the overlay class starts on the right with left:100% and with the animations of js change it, make that when you open it has left:0 and when you close left:100% again, here you have your example from right to left:

function openNav() {
    document.getElementById("Medium").style.width = "100%";
  document.getElementById("Medium").style.left = "0";
  
}
function closeNav() {
    document.getElementById("Medium").style.width = "0%";
  document.getElementById("Medium").style.left = "100%";
}

.overlay{    
height: 100%;
width: 0;
position: fixed; 
z-index: 1; 
left: 100%;
top: 0;
background-color: #944743; 
overflow-x: hidden; 
transition: 1s; 
}

<button onclick="openNav()" class="btn btn-primary "><i class="fas fa-arrow-left"></i> Go somewhere</button>
<div id="Medium" class="overlay">

                    <!-- Button to close the overlay navigation -->
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

                    <!-- Overlay content -->
                    <div class="overlay-content">
                        <h1>hola mundo</h1>

                    </div>

                </div>