delete modal account

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách đóng một hộp modal bằng HTML, CSS và JavaScript.

Delete modal account

Click vào nút button bên dưới để mở modal.

Delete Account

Bạn có chắc muốn delete account này?

Xem kết quả

Cách tạo delete modal account

Bước 1) Thêm HTML:

Ví dụ

<button id="openModal" type="button">Open Modal</button>
<div class="modalContainer">
    <span id="mySpanCloseModal" title="Close Modal" onclick="closeModal();">&times;</span>
    <div class="contentModal">
        <h1>Delete Account</h1>
        <p>Bạn có chắc muốn delete account này?</p>
        <button id="btnCancel" type="button" onclick="closeModal();">Cancel</button>
        <button id="btnDelete" type="button" onclick="closeModal();">Delete</button>
    </div>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho phần tử nút mở modal */
#openModal {
    border:none;
    outline:none;
    padding:10px 20px;
    background-color:dodgerblue;
    color:white;
    cursor:pointer;
    border-radius:5px;    
}
#openModal:hover {
    background-color:violet;    
}
/* Tạo vùng chứa modal cố định, dài rộng 100% */
.modalContainer {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:black;
    background-color:rgba(0,0,0,0.3);
    z-index:999;
    display:none;    
}
/* Tạo kiểu cho nút đóng modal */
.modalContainer > span {
    display:inline-block;
    position:absolute;
    font-size:70px;
    top:100px;
    right:100px;
    color:white;
    cursor:pointer;    
}
.modalContainer > span:hover {
    color:red;    
}
/* Tạo kiểu cho hộp modal chính */
.modalContainer .contentModal {
    padding:20px 15px 30px 15px;
    text-align:center;
    width:40%;
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color:white;
    margin:10% auto;
    border-radius:5px;
    overflow:hidden;    
}
/* Tạo kiểu cho các nút button bên trong hộp modal */
.modalContainer .contentModal button {
    border:none;
    outline:none;
    padding:10px 0;
    text-align:center;
    width:50%;
    background-color:#999;
    float:left;    
    margin-top:20px;
    font-size:16px;
    cursor:pointer;
    opacity:0.8;
}
.modalContainer .contentModal button:hover {
    opacity:1;    
}
.modalContainer .contentModal #btnDelete {
    background-color:#F60;
    color:white;    
}
/* Hiệu ứng rõ dần lên */
@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}    
}
/* Hiệu ứng mờ dần xuống */
@keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}    
}
/* Thay đổi cách hiển thị trên các màn hình nhỏ */
@media screen and (max-width:700px) {
    .modalContainer .contentModal {
        width:80%;    
    }
    .modalContainer > span {
        top:10px;
        right:10px;
        font-size:40px;
    }
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
// Khai báo biến và lấy giá trị
var openModal, modalContainer;
openModal = document.getElementById('openModal');
modalContainer = document.getElementsByClassName('modalContainer')[0];

// Gán sự kiến click mở hộp modal
openModal.onclick = function() {
    modalContainer.style.display = "block";
    modalContainer.style.animation = "fadeIn 1s";
}
// Click vào vị trí bất kỳ để đóng modal
window.onclick = function(e) {
    if(e.target == modalContainer) {
        closeModal();
    }
}
// Định nghĩ hàm đóng modal
function closeModal() {
    modalContainer.style.animation = "fadeOut 0.6s";
    setTimeout(function() {
        modalContainer.style.display = "none";
    },500);    
}
</script>