HTML, CSS, and jQuery: Build a beautiful modal-JS Tutorial-php.cn

HTML, CSS, and jQuery: Build a beautiful modal

王林

Release： 2023-10-25 12:03:53

Original

1250 people have browsed it

HTML, CSS, and jQuery: Build a beautiful modal

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>

Copy after login

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)}
}

Copy after login

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();
    });
});

Copy after login

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!