jquery弹出div窗口到中间

原创

mob64ca12d32849 2024-01-14 10:17:58 ©著作权

文章标签 javascript jQuery css 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d32849的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现jquery弹出div窗口到中间的步骤

流程图：

flowchart TD
    A[创建一个div窗口] --> B[设置div窗口的样式]
    B --> C[将div窗口添加到页面中]
    C --> D[使用jquery选择器选中div窗口]
    D --> E[设置div窗口的位置样式]

步骤解释：

创建一个div窗口：首先我们需要创建一个用于弹出的div窗口，可以通过HTML代码来创建，如下所示：

<div id="popup_div">这是弹出的内容</div>

设置div窗口的样式：为了使div窗口居中显示，我们需要设置一些样式，包括宽度、高度、背景颜色等，可以通过CSS代码来设置，如下所示：

#popup_div {
  width: 300px;
  height: 200px;
  background-color: #fff;
}

将div窗口添加到页面中：在页面中插入div窗口，可以通过jQuery的append方法来实现，如下所示：

$('body').append('<div id="popup_div">这是弹出的内容</div>');

使用jquery选择器选中div窗口：为了对div窗口进行操作，我们需要使用jQuery选择器选中它，可以使用id选择器来选中，如下所示：

var popupDiv = $('#popup_div');

设置div窗口的位置样式：为了使div窗口居中显示，我们可以通过设置其position属性为absolute，并通过设置top和left属性来控制其位置，如下所示：

popupDiv.css({
  'position': 'absolute',
  'top': '50%',
  'left': '50%',
  'transform': 'translate(-50%, -50%)'
});

完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery弹出div窗口示例</title>
  <style>
    #popup_div {
      width: 300px;
      height: 200px;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <script src="
  <script>
    $(document).ready(function() {
      // 创建一个div窗口
      $('body').append('<div id="popup_div">这是弹出的内容</div>');
      var popupDiv = $('#popup_div');
      // 设置div窗口的位置样式
      popupDiv.css({
        'position': 'absolute',
        'top': '50%',
        'left': '50%',
        'transform': 'translate(-50%, -50%)'
      });
    });
  </script>
</body>
</html>