<body>
<a href="#modal" class="btn-open-popup">EJEMPLO</a>
<div class="container-all" id="modal">
<div class="popup">
<img src="./imagenes/logo.png" alt="" height="300px" width="300px">
<div class="container-text">
<h1>Lorem ipsum dolor sit amet, consectetur.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam esse illum exercitationem perferendis accusamus, possimus sed molestiae accusantium necessitatibus neque sit aspernatur</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus facere, sequi. Beatae recusandae, officiis sapiente amet quod vero est vel.</p>
</div>
<a href="#" class="btn-close-popup">X</a>
</div>
</div>
<a href="modal.html"><img src="./imagenes/back.jpg" alt="" width="5%"></a>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
}
body,
html{
background: rgb(23, 23, 54);
}
.btn-open-popup{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
transform: translate(-50%, -50%);
color: #b392d8;
display: block;
background: white;
padding: 20px 50px;
border-radius: 50px;
}
.container-all{
width: 100%;
height: 100%;
position: fixed;
padding: 40px;
visibility: hidden;
opacity: 0;
transition: all 600ms;
}
.container-all:target{
background: rgba(0,0,0,0.8);
visibility: visible;
opacity: 1;
}
.container-all:target .popup{
top: 50%;
left: 50%;
transform: rotate(0deg) translate(-50%, -50%);
visibility: visible;
}
.popup{
width: 100%;
max-width: 800px;
height: 500px;
position: relative;
display: flex;
background: white;
visibility: hidden;
top: -80%;
left: -80%;
transform: rotate(90deg) translate(-150%, 230%);
transition: all 600ms;
}
.container-text{
width: 60%;
padding: 50px;
overflow-y: auto;
}
.container-text h1{
font-size: 30px;
}
.container-text p{
margin-top: 20px;
font-size: 16px;
}
.btn-close-popup{
width: 50px;
height: 50px;
position: absolute;
right: -20px;
top: -20px;
padding: 20px;
background: black;
color: white;
border-radius: 50%;
line-height: 10px;
}
@media screen and (max-width: 900px){
.popup{
flex-direction: column;
height: 100%;
max-height: 800px;
}
.img{
width: 100%;
height: 40%;
}
.container-text{
width: 100%;
height: 60%;
padding: 80px;
}
}
@media screen and (max-width: 500px){
.container-text{
padding: 20px;
}
.container-text h1{
font-size: 20px;
}
.container-text p{
font-size: 12px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal 3 ejemplo</title>
<link rel="stylesheet" href="./css/modal3.css">
<a href="modal.html"><img src="./imagenes/back.jpg" alt="" width="5%"></a>
</head>
<body>
<a href="#modal" id="show-modal">Ejemplo</a>
<aside id="modal" class="modal">
<div class="content-modal">
<header>
<a href="#" class="close-modal">X</a>
<h2>TOOLFRAME</h2>
</header>
<article></article>
</div>
<a href="a" class="btn-close-modal"></a>
</aside>
</body>
</html>
body{
background-color: #091D36;
font-family: sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
padding-top: 10em;
position: relative;
text-align: center;
}
h1{
color: white;
padding: 1 em;
}
#show-modal{
position: absolute;
top: 100%;
left: 50%;
font-size: 50px;
transform: translate(-50%, -50%);
color: black;
display: block;
background: white;
padding: 20px 50px;
border-radius: 50px;
font-family: fantasy;
text-decoration: none;
}
#show-modal:hover{
cursor:pointer;
background:rgb(152, 187, 226);
}
.modal{
position: fixed;
top: -100vh;
left: 0;
z-index:99999999 ;
background: rgb(0,0,0,0.75);
width: 100vh;
height: 100vh;
opacity:0;
transition: opacity 0.35s ease;
}
.modal .content-modal{
width: 100%;
max-width: 500px;
position: fixed;
left: 50%;
top: -100vh;
transition: top 0.35s ease;
margin-left: -250px;
background: white;
box-shadow: 0 1px 2px rgba(0, 0,0, 0.1);
border-radius: 2px;
z-index: 99999999;
}
.modal h2{
padding: 0.5em;
text-align: center;
color: #091D36;
margin: 0;
}
.modal article{
height: 300px;
background-color: #28DB18
}
.close-modal{
color: #091D36;
position: absolute;
top: 0.2em;
right: 0.375em;
margin: 0;
padding: 5px;
font-weight: bold;
font-size: 1.5em;
text-decoration: none;
}
.modal a:hover{
color: red;
}
.modal:target{
opacity: 1;
top: 0;
}
.modal .btn-close-modal{
position:absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 99999991;
}
.modal:target .content-modal{
top: 50px;
transition: top 0.35s ease;
}
@media (max-width: 500px){
.modal .content-modal{
width: 90%;
max-width: none;
left: 5%;
margin-left: 0;
}
}
<a href="#miModal"> <img src="./imagenes/ejemplo.png" alt=""> </a>
<div id="miModal" class="modal">
<a href="#"> <img src="./imagenes/cerrar.png" alt="" width="5%"> </a>
<div class="modal-contenido">
<img src="./imagenes/logo.png" alt="" width="60%" a>
</div>
</div>
<a href="modal.html"> <img src="./imagenes/back.jpg" alt="" width="5%"> </a>
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
}
body,
html{
background: rgb(23, 23, 54);
}
.btn-open-popup{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
transform: translate(-50%, -50%);
color: #b392d8;
display: block;
background: white;
padding: 20px 50px;
border-radius: 50px;
}
.container-all{
width: 100%;
height: 100%;
position: fixed;
padding: 40px;
visibility: hidden;
opacity: 0;
transition: all 600ms;
}
.container-all:target{
background: rgba(0,0,0,0.8);
visibility: visible;
opacity: 1;
}
.container-all:target .popup{
top: 50%;
left: 50%;
transform: rotate(0deg) translate(-50%, -50%);
visibility: visible;
}
.popup{
width: 100%;
max-width: 800px;
height: 500px;
position: relative;
display: flex;
background: white;
visibility: hidden;
top: -80%;
left: -80%;
transform: rotate(90deg) translate(-150%, 230%);
transition: all 600ms;
}
.container-text{
width: 60%;
padding: 50px;
overflow-y: auto;
}
.container-text h1{
font-size: 30px;
}
.container-text p{
margin-top: 20px;
font-size: 16px;
}
.btn-close-popup{
width: 50px;
height: 50px;
position: absolute;
right: -20px;
top: -20px;
padding: 20px;
background: black;
color: white;
border-radius: 50%;
line-height: 10px;
}
@media screen and (max-width: 900px){
.popup{
flex-direction: column;
height: 100%;
max-height: 800px;
}
.container-text{
width: 100%;
height: 60%;
padding: 80px;
}
}
@media screen and (max-width: 500px){
.container-text{
padding: 20px;
}
.container-text h1{
font-size: 20px;
}
.container-text p{
font-size: 12px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="./css/modal4.css">
<title>Modal 4 ejemplo </title>
</head>
<body>
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<button class="close-modal">
<i class="fas fa-times"> </i>
</button>
</div>
<div class="modal-body">
<i class="far fa-check-circle"> </i>
<p>¡Todo correcto! </p>
</div>
</div>
<a href="modal.html"> <img src="./imagenes/back.jpg" alt="" width="5%"> </a>
</div>
<button class="open-modal">Ejemplo </button>
<script>
var btnOpen = document.querySelector('.open-modal');
var btnClose = document.querySelector('.close-modal');
var modal = document.querySelector('.modal');
var toggleOpenClose = () => {
modal.classList.toggle('opened');
}
btnOpen.addEventListener('click', toggleOpenClose);
btnClose.addEventListener('click', toggleOpenClose);
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
min-height: 100vh;
font-size: 16px;
background: #eee;
display: flex;
justify-content: center;
align-items: center;
}
button {
background-color: #091D36;
color: #fff;
border: none;
outline: none;
padding: 16px 32px;
text-transform: uppercase;
font-size: 1em;
letter-spacing: 1.5px;
font-weight: bold;
cursor: pointer;
transition: opacity 0.3s, filter 0.3s;
}
button:hover {
opacity: 0.9;
}
/* Modal */
.modal {
z-index: 2;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #7aa2d8;
/* Hide */
opacity: 0;
width: 0;
overflow: hidden;
transition: opacity 0.4s;
transition-delay: 0.3s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
width: 450px;
background-color: #fff;
transform: translate(-50%, -70%);
/* Animation */
opacity: 0;
transition: transform 0.4s, opacity 0.4s;
transition-delay: 0.5s;
}
.modal-header {
background-color: #091D36;
display: flex;
justify-content: flex-end;
}
.modal-header i {
font-size: 1.5em;
}
.modal-body {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 48px 32px;
color: #d14b54;
font-size: 2em;
font-weight: bold;
}
.modal-body i {
font-size: 2.5em;
margin-bottom: 32px;
}
/* Modal-open */
.modal.opened {
opacity: 1;
width: 100%;
}
.modal.opened .modal-content {
opacity: 1;
transform: translate(-50%, -50%);
}
.modal.opened ~ button.open-modal {
filter: blur(3px);
}