Home > Article > Web Front-end > HTML, CSS, and jQuery: Build a beautiful modal

HTML, CSS, and jQuery: Build a beautiful modal

王林Original: 2023-10-25 12:03:531159browse

HTML, CSS and jQuery: Build a beautiful modal box

Introduction:

Pop-up windows or modal boxes are often used in web pages To display information and achieve interactive effects. This article will introduce how to use HTML, CSS and jQuery to build a beautiful modal box, with specific code examples.

1. HTML structure:

First, we need to create an HTML structure to accommodate the modal box. The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>漂亮的模态框</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <button class="open-btn">打开模态框</button>

    <div class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h1>这是一个漂亮的模态框</h1>
            <p>欢迎使用模态框示例</p>
        </div>
    </div>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

In the above code, we create a button that opens the modal box, and use a div element as the container of the modal box. The content of the modal box is placed in a div of modal-content, the close button uses a span element, and a close-btn is set class name.

2. CSS styles:

Next, we need to add some styles to the modal box. Create a file named style.css and add the following style code to the file:

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    animation-name: modalopen;
    animation-duration: 0.4s;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@keyframes modalopen {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

The above code uses some common CSS styles, which are explained below. :

.modal class is used to set the basic style of the modal box, including setting the display and hiding, positioning, width, height, background color, etc. of the modal box. The
.modal-content class is used to set the style of the modal box content, including background color, border, shadow, etc.
.close-btn class is used to set the style of the close button, including color, font size, etc.
@keyframes is used to define an animation effect so that the modal box has a transition effect from shrinking to enlarging.

3. jQuery script:

Finally, we use jQuery to implement the function of the modal box. Create a file called script.js and add the following code to the file:

$(document).ready(function() {
    $(".open-btn").click(function() {
        $(".modal").fadeIn();
    });

    $(".close-btn").click(function() {
        $(".modal").fadeOut();
    });
});

The above code uses jQuery’s fadeIn() and fadeOut() method to control the display and hiding of the modal box.

Conclusion:

Through the cooperation of HTML, CSS and jQuery, we built a beautiful modal box and realized the function of clicking the button to open and clicking the close button to close the modal box. You can customize and extend the style and interaction of the modal box according to your own needs. Hope this article is helpful to you.

Reference link:

jQuery official documentation: https://api.jquery.com/
CSS animation: https://www.w3schools.com /css/css3_animations.asp

The above is the detailed content of HTML, CSS, and jQuery: Build a beautiful modal. For more information, please follow other related articles on the PHP Chinese website!

jquery css html JS animation https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to achieve seamless scrolling news notifications using HTML, CSS and jQueryNext article：How to achieve seamless scrolling news notifications using HTML, CSS and jQuery

See more

HTML, CSS, and jQuery: Build a beautiful modal

Related articles