<body> <button id="openModal">Open Modal</button> <div class="modal" id="modal"> <div class="modal-inner"> <h2>testing testing</h2> <button id="closeModal">Close</button> </div></div></body>
button{
background-image: linear-gradient(to right, #663399, #8853bd);
border-radius: 20px;
border: 0;
box-shadow:0 1px 4px rgba(0,0,0,0.3);
color: #fff;
cursor:pointer;
padding: 10px 25px;
}
button:active{
opacity: 0.8;
}
.modal{
opacity: 0;
position: fixed;
left: 0;
right: 0;
bottom: 250;
transition: all 0.3s ease-in-out;
z-index: 999;
display: grid;
place-items: center;
height: 100;
margin: 0;
}
.modal.open{
opacity: 1;
z-index: 999;
}
.modal-inner{
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
padding: 15px 25px;
text-align: center;
width: 380px;
}
.modal-inner h2{
margin: 0;
}
const openBtn = document.getElementById("openModal");
const closeBtn = document.getElementById("closeModal");
const modal = document.getElementById("modal");
openBtn.addEventListener("click", () => {
modal.classList.add("open");
});
closeBtn.addEventListener("click", () => {
modal.classList.remove("open");
});miska kukkohovi
Click on an image to see more details about the work.
If you're interested in buying a painting, send me an email or click here.
See more at wwwcontemporary.com