0

Tengo este código, solo necesito hacer que el modal entre por el lado derecho de la pantalla (derecha - izquierda) de la manera que esta lo hace al contrario

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> 
1
  • Comparte el código completo, para ver que librerías estas usando. el 7 jul. 2018 a las 18:59

1 respuesta 1

0

Lo que tienes que hacer es que la clase overlay empiece por la derecha con left:100% y con las animaciones de js cambiarlo, hacer que cuando lo abras tenga left:0 y cuando lo cierres left:100% otra vez, aquí tienes tu ejemplo de derecha a izquierda:

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> 

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.