如何创建一个JavaScript弹出DIV窗口层的效果-前端开发

下面是如何创建一个JavaScript弹出DIV窗口层的效果的完整攻略：

下面是如何创建一个JavaScript弹出DIV窗口层的效果的完整攻略：

1. 创建html文件

首先，我们需要创建一个html文件，并在文件中编写div标签。这个div标签将用于显示弹出窗口

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹出窗口演示</title>
    <style>
        #popup {
            display: none; /* 初始隐藏弹出窗口 */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 使弹出窗口居中显示 */
            padding: 20px;
            background-color: white;
            border: 1px solid black;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>

    <div id="popup">
        <h2>这是弹出窗口的标题</h2>
        <p>这是弹出窗口的内容</p>
        <button onclick="closePopup()">关闭</button>
    </div>

    <button onclick="showPopup()">显示弹出窗口</button>

    <script>
        // 此处编写JavaScript代码
    </script>

</body>
</html>

2. 创建JavaScript代码

在html文件中的JavaScript标签中，我们需要编写一些代码来实现弹出窗口的显示与隐藏

var popup = document.getElementById('popup'); // 获取弹出窗口元素

function showPopup() {
    popup.style.display = 'block'; // 显示弹出窗口
}

function closePopup() {
    popup.style.display = 'none'; // 隐藏弹出窗口
}

在上面的代码中，我们首先通过getElementById方法获取了div元素，然后编写了两个函数showPopup和closePopup，它们分别用于显示和隐藏弹出窗口。在showPopup函数中，我们将div元素的display属性设置为'block'，这将使其显示出来。在closePopup函数中，我们将display属性设置为'none'，这将使其隐藏起来。

示例说明

下面提供两个使用弹出窗口的示例说明：

示例一

我们可以在一个输入框中编写一些内容，并在点击按钮后弹出一个提示框，显示输入框中的内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹出窗口演示</title>
    <style>
        #popup {
            display: none; /* 初始隐藏弹出窗口 */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 使弹出窗口居中显示 */
            padding: 20px;
            background-color: white;
            border: 1px solid black;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>

    <div id="popup">
        <p id="popup-content"></p>
        <button onclick="closePopup()">关闭</button>
    </div>

    <input type="text" id="input-field">
    <button onclick="showPopup()">显示输入框内容</button>

    <script>
        var popup = document.getElementById('popup'); // 获取弹出窗口元素
        var popupContent = document.getElementById('popup-content');

        function showPopup() {
            var inputText = document.getElementById('input-field').value;
            popupContent.innerHTML = inputText; // 将输入框的内容显示在弹出窗口中
            popup.style.display = 'block'; // 显示弹出窗口
        }

        function closePopup() {
            popup.style.display = 'none'; // 隐藏弹出窗口
        }
    </script>

</body>
</html>

示例二

我们可以创建一个按钮列表，并在点击列表中的某个按钮后弹出一个提示框，告诉用户点击了哪个按钮：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹出窗口演示</title>
    <style>
        #popup {
            display: none; /* 初始隐藏弹出窗口 */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 使弹出窗口居中显示 */
            padding: 20px;
            background-color: white;
            border: 1px solid black;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>

    <div id="popup">
        <p id="popup-content"></p>
        <button onclick="closePopup()">关闭</button>
    </div>

    <button onclick="showPopup('1')">按钮1</button>
    <button onclick="showPopup('2')">按钮2</button>
    <button onclick="showPopup('3')">按钮3</button>

    <script>
        var popup = document.getElementById('popup'); // 获取弹出窗口元素
        var popupContent = document.getElementById('popup-content');

        function showPopup(buttonText) {
            popupContent.innerHTML = '您点击了按钮：' + buttonText; // 显示用户点击的按钮
            popup.style.display = 'block'; // 显示弹出窗口
        }

        function closePopup() {
            popup.style.display = 'none'; // 隐藏弹出窗口
        }
    </script>

</body>
</html>

这样，在用户点击按钮之后，弹出窗口将显示相应的提示信息，告诉用户点击了哪个按钮。