SPONSOR MY EDUCATION START-UP CONTEST
                

                    This contest is geared towards discovering and funding innovative ideas.

                    Click here to participate
        

  
  
  
  Modal Box
  



  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đánh dấu HTML cho Modal Popup Box

Bây giờ hãy thiết lập đánh dấu HTML cho phương thức của chúng ta. Bạn có thể sao chép đoạn mã sau vào tệp index.html của mình hoặc lấy tất cả mã cho dự án này từ codepen

    
        
        
            SPONSOR MY EDUCATION START-UP CONTEST
                

                    This contest is geared towards discovering and funding innovative ideas.

  


                    Click here to participate
        
        
    

This is a heading
This is a paragraph

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vì chúng tôi đang sử dụng biểu tượng Phông chữ tuyệt vời trong mã của mình nên bạn sẽ cần cung cấp liên kết tới biểu tượng đó khi sao chép mã ở trên

Nếu không có CSS, trang của chúng ta sẽ trông trống rỗng, như thế này

Tạo kiểu hộp bật lên phương thức bằng CSS

Chúng tôi muốn hộp phương thức của chúng tôi trông thật đẹp, vì vậy bây giờ hãy nhập một số mã CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: montserrat;
    background-color: #0a9396;
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}

.main__title {
    font-size: 4rem
}

.main__paragraph {
    font-size: 1.8rem
}

.modal__img {
    max-width: 60%;
    height: auto;
    display: block;
}

.modal {
    max-width: 700px;
    width: 85%;
    position: fixed;
    top: 50%;
    background-color: rgba[0, 0, 0, 0.3];
    left: 50%;
    transform: translate[-50%, -50%];
    border-radius: 5px;
    background: #EE9B00;
}


/****show modal class****/

.modal.show {
    display: block
}

#close {
    cursor: pointer;
    color: white;
    position: absolute;
    top: 0;
    font-size: 25px;
    right: 0;
    padding: 1rem;
    margin-right: 10px;
}

.modal__title {
    font-size: 2.5rem;
}

.modal__title span {
    display: block;
    font-weight: 400;
}

.modal__paragraph {
    font-size: 16px;
    font-weight: 400;
}

.modal__button {
    background-color: #0a9396;
    border: none;
    color: white;
    padding: 1rem 2rem;
    border-radius: 5px;
    box-shadow: 2px 2px 12px rgba[0, 0, 0, 0.2];
    transition: 0.3s background-color ease-in-out;
}

.modal__button:hover {
    background-color: #0a9372;
}

main {
    text-align: center;
}

.modal__container {
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}


/****styling modal on smaller screen******/

@media only screen and [min-width: 768px] {
    .modal__container {
        flex-direction: row;
        padding: 2rem;
        text-align: left;
    }
    .modal__img {
        max-width: 50%
    }
}

@media only screen and [max-width: 500px] {
    .modal__title {
        font-size: 2rem;
    }
    .modal__img {
        max-width: 80%
    }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Với tất cả các kiểu trên được áp dụng, đây là giao diện của hộp phương thức của chúng ta bây giờ

Bây giờ, chúng tôi sẽ ẩn cửa sổ pop phương thức và hiển thị nó vài giây sau khi khách truy cập vào trang web của chúng tôi. Chúng tôi sẽ triển khai chức năng này bằng cách thêm một số mã JavaScript vào tệp

    
        
        
            SPONSOR MY EDUCATION START-UP CONTEST
                

                    This contest is geared towards discovering and funding innovative ideas.

                    Click here to participate
        
        
    

This is a heading
This is a paragraph

Trước khi thêm mã JavaScript, hãy ẩn hộp phương thức bằng cách đặt thuộc tính

    
        
        
            SPONSOR MY EDUCATION START-UP CONTEST
                

                    This contest is geared towards discovering and funding innovative ideas.

                    Click here to participate
        
        
    

This is a heading
This is a paragraph

    
        
        
            SPONSOR MY EDUCATION START-UP CONTEST
                

                    This contest is geared towards discovering and funding innovative ideas.

                    Click here to participate
        
        
    

This is a heading
This is a paragraph

    
        
        
            SPONSOR MY EDUCATION START-UP CONTEST
                

                    This contest is geared towards discovering and funding innovative ideas.

                    Click here to participate
        
        
    

This is a heading
This is a paragraph

.modal {
  display: none;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ, đây là trang web của chúng tôi trông như thế nào khi không có hộp phương thức

Thêm JavaScript

Bây giờ hãy thêm mã JavaScript của chúng tôi

const closeBtn = document.getElementById['close'];
const modalMenu = document.getElementById['modal'];
const modalBtn = document.querySelector['.modal__button'];

setTimeout[[] => {
    modalMenu.classList.add['show'];
}, 3000];

closeBtn.addEventListener['click', [] => { modalMenu.classList.remove['show'] }]
modalBtn.addEventListener['click', [] => { modalMenu.classList.remove['show'] }]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sử dụng JavaScript

• Chúng tôi đã truy cập hộp phương thức, nút đóng và nút trên phương thức
• Tiếp theo, chúng tôi đã sử dụng phương thức setTimeout[] để hiển thị hộp phương thức 3 giây sau khi khách truy cập vào trang web
• Cuối cùng, chúng tôi đã thêm một trình lắng nghe sự kiện để ẩn hộp phương thức khỏi chế độ xem khi khách truy cập nhấp vào nút đóng hoặc nút phương thức

Bây giờ, đây là cách cuối cùng dự án của chúng ta trông và hoạt động

kết thúc

Trong hướng dẫn này, chúng ta đã học cách tạo hộp bật lên theo chế độ bằng HTML, CSS và JavaScript

Cảm ơn vì đã theo dõi. Tôi hy vọng bạn đã học được điều gì đó hữu ích từ hướng dẫn ngắn này. Vui lòng để lại nhận xét và thoải mái theo dõi tôi trên Twitter nếu bạn thích bài viết này

Cửa sổ bật lên trong HTML là gì?

Làm cách nào để tạo cửa sổ bật lên trong HTML CSS?

Làm cách nào để tạo cảnh báo bật lên trong HTML?