javascript 通过封装div方式弹出div窗体-前端开发

下面是JavaScript通过封装div方式弹出div窗体的攻略，包含以下几个步骤：

下面是JavaScript通过封装div方式弹出div窗体的攻略，包含以下几个步骤：

步骤1：创建一个DIV窗体

我们可以使用HTML标记创建一个DIV窗体，比如：

<div id="myDiv" style="display:none;">
  这是弹出窗体的内容。
</div>

这里创建了一个ID为myDiv的DIV元素，并将其display样式设置为none，表示一开始不可见。

步骤2：创建一个按钮

接下来我们需要创建一个按钮来触发显示DIV窗体的操作，比如：

<button onclick="showDiv()">显示弹出窗体</button>

这里创建了一个按钮，并设置其onclick事件为showDiv()函数，该函数用于显示DIV窗体。

步骤3：编写JavaScript代码

在这一步，我们需要编写JavaScript代码，用于显示DIV窗体。代码如下：

function showDiv() {
  var div = document.getElementById('myDiv');
  div.style.display = 'block';
}

这里定义了一个showDiv()函数，该函数通过getElementById()方法获取ID为myDiv的DIV元素，并设置其display样式为block，使其显示出来。

步骤4：封装函数

为了让代码更加模块化，我们可以将showDiv()函数封装起来，并通过传入元素ID的方式来实现复用性，比如：

function showDiv(id) {
  var div = document.getElementById(id);
  div.style.display = 'block';
}

这里我们将showDiv()函数的id参数作为DIV元素的ID来查找元素，并显示出来。

示例1

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript通过封装div方式弹出div窗体</title>
  <meta charset="UTF-8">
</head>
<body>

  <button onclick="showDiv('myDiv')">显示弹出窗体</button>

  <div id="myDiv" style="display:none;">
    <h2>我是一个弹出窗体</h2>
    <p>这里是窗体内容</p>
    <button onclick="hideDiv('myDiv')">关闭</button>
  </div>

  <script>
    function showDiv(id) {
      var div = document.getElementById(id);
      div.style.display = 'block';
    }

    function hideDiv(id) {
      var div = document.getElementById(id);
      div.style.display = 'none';
    }
  </script>

</body>
</html>

这里我们创建了一个含有ID为myDiv的DIV窗体，并在其内部添加了一个按钮用于关闭该窗体。

示例2

下面是一个使用jQuery库实现方式的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript通过封装div方式弹出div窗体</title>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

  <button>显示弹出窗体</button>

  <div id="myDiv" style="display:none;">
    <h2>我是一个弹出窗体</h2>
    <p>这里是窗体内容</p>
    <button>关闭</button>
  </div>

  <script>
    $('button').click(function() {
      $('#myDiv').show();
    });

    $('#myDiv button').click(function() {
      $(this).parent().hide();
    });
  </script>

</body>
</html>

这里我们使用jQuery库中的show()和hide()方法来显示和隐藏DIV窗体，并使用click()方法在按钮点击时触发事件。