Design modal using CSS only

Khái quát

Liệu các bạn có biết model là gì, đôi khi không phải là không ? chúng ta không biết mà là chúng ta không biết tên nó thôi. Modal là dạng hộp thoại mà chỉ hiện lên khi người dùng thao tác nhấn vào đâu đó, hộp thoại này hoàn toàn có thể thao tác bên trong được.

Tùy vào mục đích mà các hộp modal này được dùng đa dạng khác nhau kể cả đăng ký, đăng nhập, điền thông tin.

Vậy hôm nay hãy cùng mình đi thiết kế nó một cách xin động nhất nhé.

Tiến hành code

Trạng thái ban đầu

Video hướng dẩn chi tiết

Truy cập kênh youtube Lùn Dev để xem nhiều hơn.

Code HTML

Tạo nút label để nhấn vào có for = modal_confirm1

Tạo modal với input tương ứng nằm bên trong có id = modal_confirm1

CODE CSS

body{
    background-image: linear-gradient(to top right, #EB9FC0, #B83F8F, #2C2867);
    height:100vh;
    overflow:hidden;
}
.btn{
    display: block;
    color:#fff;
    margin-top:300px;
    padding:5px 10px;
    text-align: center;
}
.btn label{
    background-color: #ffffff66;
    display: inline-block;
    margin:0 20px;
    padding:20px;
}
.modal{
    width:300px;
    margin:auto;
    position: fixed;
    top:50%;
    left:50%;
    transition-delay: 2s;
    transform: translate(-50%, -50%) scale(0);
}
.modal .header{
    background-image: linear-gradient(to top left,
        #C086E1, #E8ABC7);
        min-height:200px;
        border-radius: 30px;
        position: relative;
        padding:20px 20px 100px 20px;
        opacity: 0;
        transition: 0.5s;
        transform: translate(0,70px);
}
.modal img{
    position: absolute;
}
.modal img:nth-child(1){
    top:-30px;
    width:90%;
    left:5%;
    opacity: 0;
    transform: translate(0,70px);
    transition: 0.7s;
}
.modal img:nth-child(2){
    top:170px;
    transform: rotate(80deg);
    width:100px;
    left:-50px;
    opacity:0;
    transition: 1s;

}
.modal img:nth-child(3){
    transform: rotate(-80deg);
    bottom:-90px;
    width:100px;
    right:-40px;
    opacity:0;
    transition: 1s;
}
.modal .content{
    background-color: #E2F0EB4D;
    padding:20px;
    min-height: 100px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    color:#eee;
    font-family: monospace;
    transform: translate(0,70px);
    opacity: 0;
    transition: 0.5s;
    transition-delay: 0.2s;
}
.modal .confirm{
    text-align: center;
    margin-top:30px;
}
.modal .content label,
.modal .content button{
    display: inline-block;
    border:none;
    padding:10px;
    color:#fff;
    margin: 0 10px;
}
.modal .content label{
    background-color: #ffffff4D;
}
.modal .content button{
    background-color: #986FEA;
}
.modal input[name="setingModal"]{
    display: none;
}
.modal:has(input[name="setingModal"]:checked){
    transition: 0s;
    transform: translate(-50%,-50%) scale(1);
}
.modal:has(input[name="setingModal"]:checked) .header{
    opacity: 1;
    transform: translate(0,0);
}
.modal:has(input[name="setingModal"]:checked) .content{
    transition-delay: 0s;
    opacity: 1;
    transform: translate(0,-70px);
}
.modal:has(input[name="setingModal"]:checked) .header img:nth-child(1){
    opacity: 1;
    transform: translate(0,0);
    transition-delay: 0.3s;
}
.modal:has(input[name="setingModal"]:checked) .header img:nth-child(2){
    opacity: 1;
    transform: rotate(-20deg);
    transition-delay: 0.5s;
    top:-20px;
}
.modal:has(input[name="setingModal"]:checked) .header img:nth-child(3){
    opacity: 1;
    transform: rotate(20deg);
    transition-delay: 0.5s;
    bottom:20px;
}

Trạng thái sau khi được click

Khái quát

Tiến hành code

Video hướng dẩn chi tiết

Code HTML

CODE CSS

Download code and image

Thank You

Contact Form