javascript+html5+css3自定义弹出窗口效果

"javascript+html5+css3自定义弹出窗口效果"主要可以通过以下步骤实现：

第一步：HTML部分

在HTML代码中，我们需要首先定义一个触发弹出窗口的按钮，用于触发弹出窗口的开启。同时我们需要在代码中定义一个 <div> 标签作为弹出窗口的容器。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>自定义弹出窗口效果</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 弹出窗口背景层样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }
        /* 弹出窗口样式 */
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            z-index: 1001;
            display: none;
        }
    </style>
</head>
<body>
    <button id="open-modal-btn">打开弹出窗口</button>
    <div class="modal-overlay"></div>
    <div class="modal">
        <h2>这里是弹出窗口</h2>
        <button id="close-modal-btn">关闭弹出窗口</button>
    </div>
</body>
</html>

第二步：CSS部分

在CSS部分实现弹出窗口的样式，包括弹出窗口的位置、宽高、背景色等。

示例代码如下：

/* 弹出窗口背景层样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

/* 弹出窗口样式 */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    z-index: 1001;
    display: none;
}

第三步：Javascript部分

在Javascript中实现弹出窗口的逻辑。通过添加class实现弹出窗口的显示和隐藏。

示例代码如下：

// 取得打开和关闭按钮
let openModalBtn = document.getElementById("open-modal-btn");
let closeModalBtn = document.getElementById("close-modal-btn");

// 取得模态框和模态框背景
let modal = document.querySelector(".modal");
let modalOverlay = document.querySelector(".modal-overlay");

// 打开模态框
openModalBtn.onclick = function () {
    modal.classList.add("show-modal");
    modalOverlay.classList.add("show-modal-overlay");
};

// 关闭模态框
closeModalBtn.onclick = function () {
    modal.classList.remove("show-modal");
    modalOverlay.classList.remove("show-modal-overlay");
};

示例说明一：

下面是一个点击按钮弹出登录框的示例：

<!DOCTYPE html>
<html>
<head>
    <title>自定义弹出窗口效果</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 弹出窗口背景层样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }
        /* 弹出窗口样式 */
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            z-index: 1001;
            display: none;
        }
        /* 登录框表单样式 */
        .modal-form {
            display: flex;
            flex-direction: column;
        }
        .modal-form label {
            margin-top: 10px;
        }
        .modal-form input {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <button id="open-modal-btn">打开登录框</button>
    <div class="modal-overlay"></div>
    <div class="modal">
        <h2>登录框</h2>
        <form class="modal-form" action="">
            <label for="user-name">用户名：</label>
            <input type="text" id="user-name">
            <label for="user-pwd">密码：</label>
            <input type="password" id="user-pwd">
            <button type="submit">登录</button>
        </form>
        <button id="close-modal-btn">关闭登录框</button>
    </div>
    <script>
        // 取得打开和关闭按钮
        let openModalBtn = document.getElementById("open-modal-btn");
        let closeModalBtn = document.getElementById("close-modal-btn");

        // 取得模态框和模态框背景
        let modal = document.querySelector(".modal");
        let modalOverlay = document.querySelector(".modal-overlay");

        // 打开模态框
        openModalBtn.onclick = function () {
            modal.classList.add("show-modal");
            modalOverlay.classList.add("show-modal-overlay");
        };

        // 关闭模态框
        closeModalBtn.onclick = function () {
            modal.classList.remove("show-modal");
            modalOverlay.classList.remove("show-modal-overlay");
        };
    </script>
</body>
</html>

示例说明二：

下面是一个弹出图片预览框的示例：

<!DOCTYPE html>
<html>
<head>
    <title>自定义弹出窗口效果</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 弹出窗口背景层样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }
        /* 弹出窗口样式 */
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            z-index: 1001;
            display: none;
        }
        /* 图片样式 */
        .modal-img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <img src="./image.jpg" id="open-modal-btn">
    <div class="modal-overlay"></div>
    <div class="modal">
        <img class="modal-img" src="./image.jpg">
        <button id="close-modal-btn">关闭预览框</button>
    </div>
    <script>
        // 取得打开和关闭按钮
        let openModalBtn = document.getElementById("open-modal-btn");
        let closeModalBtn = document.getElementById("close-modal-btn");

        // 取得模态框和模态框背景
        let modal = document.querySelector(".modal");
        let modalOverlay = document.querySelector(".modal-overlay");
        let modalImg = document.querySelector(".modal-img");

        // 打开模态框
        openModalBtn.onclick = function () {
            modal.classList.add("show-modal");
            modalOverlay.classList.add("show-modal-overlay");
            modalImg.setAttribute("src", openModalBtn.getAttribute("src"));
        };

        // 关闭模态框
        closeModalBtn.onclick = function () {
            modal.classList.remove("show-modal");
            modalOverlay.classList.remove("show-modal-overlay");
        };
    </script>
</body>
</html>

以上就是“javascript+html5+css3自定义弹出窗口效果”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript+html5+css3自定义弹出窗口效果 - Python技术站

javascript+html5+css3自定义弹出窗口效果

第一步：HTML部分

第二步：CSS部分

第三步：Javascript部分

示例说明一：

示例说明二：

相关文章