首页
前端开发
Javascript
使用jQuery实现div弹窗居中效果

使用jQuery实现div弹窗居中效果

20 次浏览 0 条评论
rar
rar

实现div弹出居中的步骤

在使用jQuery实现div弹出居中效果时，通常会采取以下步骤：

  1. HTML结构：编写基本HTML，将弹窗内容封装在一个div内，并赋予特定id或class，以便jQuery识别操作。
  2. CSS样式：
  3. 设置弹窗div的固定宽高或百分比。
  4. 使用position: fixed;属性定位，使其相对屏幕居中。
  5. jQuery代码：
  6. 获取弹窗宽高与浏览器窗口的宽高。
  7. 使用$(window).width()和$(window).height()计算屏幕中心。
  8. 利用css方法动态设置top和left属性，使弹窗始终居中。

代码示例



#popup {
  width: 300px;
  height: 150px;
  background-color: #f1f1f1;
  position: fixed;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

function showPopup() {
  $('#popup').css({
    top: ($(window).height() - $('#popup').outerHeight()) / 2,
    left: ($(window).width() - $('#popup').outerWidth()) / 2
  }).fadeIn();
}

$(window).resize(showPopup);
$('#showPopupBtn').click(showPopup);

关键点

  • 使用$(window).resize()事件，确保窗口大小改变时div弹出居中效果保持一致。
  • 在显示div时用fadeIn等效果增加视觉体验。
rar 文件大小：272B