Estoy tratando de hacer un modal usando CSS puro y HTML. Hasta ahora tengo esto
[id^=modal] { display: none; position: fixed; top: 0; left: 0; } [id^=modal]:target { display: block; } input[type=checkbox] { position: absolute; clip: rect(0 0 0 0); } .popup { width: 100%; height: 100%; z-index: 99999; } .popup__overlay { position: fixed; z-index: 1; display: block; top: 0; left: 0; height: 100%; width: 100%; background: #000000b3; } .popup__wrapper { position: fixed; z-index: 9; width: 80%; max-width: 1200px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 8px; padding: 58px 32px 32px 32px; background: #fff; } .popup__close { position: absolute; top: 16px; right: 26px; } <a href="#modal1">Open modal 1</a> <div class="popup" id="modal1"> <a class="popup__overlay" href="#"></a> <div class="popup__wrapper"> <a class="popup__close" href="#">Close icon here</a> <p>POPUP 1 : CONTENT HERE</p> </div> </div> El problema ahora es que cuando cierro este modal, se desplaza hacia arriba. Creo que esto se debe a href="#" . ¿Hay alguna otra forma de cerrar este modal usando CSS que no haga que se desplace hacia arriba? Si no es posible, ¿cómo puedo hacerlo con la menor cantidad de javascript posible?
En lugar de href = "#" use href = "#!" . Su ejemplo está a continuación:
[id^=modal] { display: none; position: fixed; top: 0; left: 0; } [id^=modal]:target { display: block; } input[type=checkbox] { position: absolute; clip: rect(0 0 0 0); } .popup { width: 100%; height: 100%; z-index: 99999; } .popup__overlay { position: fixed; z-index: 1; display: block; top: 0; left: 0; height: 100%; width: 100%; background: #000000b3; } .popup__wrapper { position: fixed; z-index: 9; width: 80%; max-width: 1200px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 8px; padding: 58px 32px 32px 32px; background: #fff; } .popup__close { position: absolute; top: 16px; right: 26px; } <a href="#modal1">Open modal 1</a> <div class="popup" id="modal1"> <a class="popup__overlay" href="#!"></a> <div class="popup__wrapper"> <a class="popup__close" href="#!">Close icon here</a> <p>POPUP 1 : CONTENT HERE</p> </div> </div>