HTML页面弹出居中可拖拽的自定义窗口层

HTML页面弹出居中可拖拽的自定义窗口层是一个比较常见的需求,在实现过程中需要用到HTML、CSS和JavaScript技术。

以下是实现的步骤:

1. HTML布局

首先,在HTML页面中设置一个弹出层的容器,例如:

<div class="popup-container">
  <div class="popup-header">
    <h2>弹出窗口标题</h2>
    <button class="close-btn">×</button>
  </div>
  <div class="popup-content">
    <!-- 弹出窗口内容 -->
  </div>
</div>

以上代码中,popup-container是弹出层的容器,popup-header是容器的头部,popup-content是容器的内容,close-btn是一个关闭按钮。

2. CSS样式

接着,需要使用CSS来设置弹出层的样式。设置弹出窗口的样式,包括弹出窗口容器、容器头部及关闭按钮等。

需要注意的是,为了实现弹出窗口可拖动,需要在CSS中设置弹出层为绝对定位,并设置层的左边和顶端的偏移量。

在CSS中,设置弹出层的样式代码如下:

.popup-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  background-color: #f3f3f3;
}

.popup-header h2 {
  margin: 0;
}

.close-btn {
  border: none;
  background: none;
  font-size: 25px;
  cursor: pointer;
}
.popup-content {
  padding: 20px;
}

在上述代码中,设置了弹出窗口容器为绝对定位,并设置了容器的宽度和高度,背景颜色及边框等样式。

3. JavaScript代码

最后,需要使用JavaScript代码来实现弹出层的显示和关闭,以及拖动效果。

首先,在JavaScript中定义一个函数,用来弹出层的显示:

function showPopup() {
  var popupContainer = document.querySelector('.popup-container');
  popupContainer.style.display = 'block'; // 设置容器为显示状态
}

接着,定义一个关闭弹出层的函数:

function closePopup() {
  var popupContainer = document.querySelector('.popup-container');
  popupContainer.style.display = 'none'; // 设置容器为隐藏状态
}

针对弹出层的拖动效果,需要在JS中定义相应的函数,可以使用鼠标事件来实现。

具体实现过程可以参考以下的代码示例:

var popupContainer = document.querySelector('.popup-container');
var drag = false;
var startX = 0;
var startY = 0;
var offsetX = 0;
var offsetY = 0;

popupContainer.addEventListener("mousedown", function(e) {
    // 获取鼠标按下时弹出层左上角的坐标
  startX = e.clientX - popupContainer.offsetLeft;
  startY = e.clientY - popupContainer.offsetTop;
  drag = true;
});

document.addEventListener("mousemove", function(e) {
  if (drag) {
    e.preventDefault();
    // 计算鼠标移动的距离
    offsetX = e.clientX - startX;
    offsetY = e.clientY - startY;
    // 移动弹出层
    popupContainer.style.left = popupContainer.offsetLeft + offsetX + "px";
    popupContainer.style.top = popupContainer.offsetTop + offsetY + "px";
    // 重新设定鼠标按下时弹出层左上角的坐标
    startX = e.clientX - offsetX;
    startY = e.clientY - offsetY;
  }
});

document.addEventListener("mouseup", function(e) {
  drag = false;
});

以上代码来自这篇教程,可以参考该链接中的完整代码。

另外,以下是一个简单的示例,展示了如何在HTML页面中使用弹出层:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>弹出窗口</title>
  <style>
    /* 设置弹出层的样式 */
    .popup-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 300px;
      background-color: #fff;
      border: 1px solid #ccc;
    }

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      background-color: #f3f3f3;
    }

    .popup-header h2 {
      margin: 0;
    }

    .close-btn {
      border: none;
      background: none;
      font-size: 25px;
      cursor: pointer;
    }

    .popup-content {
      padding: 20px;
    }
  </style>
</head>
<body>
  <button onclick="showPopup()">显示弹出层</button>
  <!-- 弹出层容器 -->
  <div class="popup-container">
    <div class="popup-header">
      <h2>弹出窗口标题</h2>
      <button class="close-btn" onclick="closePopup()">×</button>
    </div>
    <div class="popup-content">
      <p>这里是弹出层的内容</p>
    </div>
  </div>

  <script>
    // 弹出层显示函数
    function showPopup() {
      var popupContainer = document.querySelector('.popup-container');
      popupContainer.style.display = 'block'; // 设置容器为显示状态
    }

    // 弹出层关闭函数
    function closePopup() {
      var popupContainer = document.querySelector('.popup-container');
      popupContainer.style.display = 'none'; // 设置容器为隐藏状态
    }

    // 弹出层拖动函数
    var popupContainer = document.querySelector('.popup-container');
    var drag = false;
    var startX = 0;
    var startY = 0;
    var offsetX = 0;
    var offsetY = 0;

    popupContainer.addEventListener("mousedown", function(e) {
      startX = e.clientX - popupContainer.offsetLeft;
      startY = e.clientY - popupContainer.offsetTop;
      drag = true;
    });

    document.addEventListener("mousemove", function(e) {
      if (drag) {
        e.preventDefault();
        offsetX = e.clientX - startX;
        offsetY = e.clientY - startY;
        popupContainer.style.left = popupContainer.offsetLeft + offsetX + "px";
        popupContainer.style.top = popupContainer.offsetTop + offsetY + "px";
        startX = e.clientX - offsetX;
        startY = e.clientY - offsetY;
      }
    });

    document.addEventListener("mouseup", function(e) {
      drag = false;
    });
  </script>
</body>
</html>

以上示例展示了一个最基本的弹出窗口,通过点击按钮显示弹出层,并在弹出层的头部增加了一个关闭按钮。同时,增加了弹出层的拖动效果,用户可以通过鼠标在弹出层的任意位置拖动窗口,改变窗口的位置。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML页面弹出居中可拖拽的自定义窗口层 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • css一些不常见但很有用的属性操作大全

    好的!下面我将为您详细讲解CSS一些不常见但很有用的属性操作大全。 一、CSS常用单位中的em、rem和vh、vw 1. em和rem em是相对长度单位,它依赖于所在元素的字体大小。 rem也是相对长度单位,但是相对于根元素(html元素)的字体大小。 具体使用: /*先定义body的font-size*/ body { font-size: 16px; …

    css 2023年6月9日
    00
  • CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

    CSS hack是为了兼容不同浏览器所采用的编写CSS代码的技巧。下面是通用方法的攻略: 一、注释法 在CSS代码块中编写以下代码: .selector { color: red; /*所有浏览器应用此代码*/ _color: blue; /*只有IE6、IE7浏览器应用此代码,其他浏览器忽略*/ *color: yellow; /*IE6、IE7应用此代码…

    css 2023年6月10日
    00
  • js处理表格对table进行修饰

    关于“js处理表格对table进行修饰”的完整攻略,可以分为以下几个步骤: 第一步:获取table元素 要对表格进行处理,首先需要获取表格的dom元素。可以通过getElementById或者querySelector等方法获取该元素。获取到table元素后,可以用变量保存下来。 const table = document.getElementById(‘…

    css 2023年6月10日
    00
  • css 完美清除浮动的两种解决方案

    当一个元素实现浮动后,其父元素可能会失去高度,造成布局混乱,而清除浮动则是指清除浮动元素对父元素造成的影响,使其能正常显示。下面介绍两种常用的清除浮动方法。 方法一:使用空元素清除浮动 步骤一:给浮动元素的父元素添加clearfix类 <div class="parent clearfix"> <div class=&q…

    css 2023年6月10日
    00
  • Bootstrap每天必学之缩略图与警示窗

    下面我来为您详细讲解“Bootstrap每天必学之缩略图与警示窗”的完整攻略。 一、缩略图 1. 基本概念 Bootstrap提供了一种快速、简单的缩略图生成方式。可以通过将<a>标签或<img>标签包含在一个<div>标签中,再在该<div>标签上应用.thumbnail类实现。 2. 示例说明 下面是一个简…

    css 2023年6月11日
    00
  • 兼容浏览器的css网页细线表格设计

    兼容浏览器的CSS网页细线表格设计需要注意以下几个方面: 1. 优先使用CSS绘制表格 在设计细线表格时,尽可能地使用CSS来绘制表格而不是在HTML中使用<table>标签。CSS的绘制方式比HTML表格更灵活,而且更适合在不同设备中展示。样式可以用于表格中的所有元素,包括表头,表格主体和表格底部。 2. 设置表格边框样式 使用CSS样式设置表…

    css 2023年6月10日
    00
  • 原生js实现自定义滚动条

    实现自定义滚动条可以让页面看起来更加美观,并且可以提升用户体验。原生JS实现自定义滚动条的过程是比较复杂的,下面我将提供一份完整攻略。 前期准备 首先,我们需要准备一个带有滚动的内容块和一个用来代替原生滚动条的div。 <div class="scroll-wrapper"> <div class="scrol…

    css 2023年6月9日
    00
  • css制作tips提示框,气泡框,制作三角形的实现

    下面是关于”CSS制作Tips提示框,气泡框,制作三角形的实现”的完整攻略: 1. 制作气泡框 制作气泡框可使用伪类:before或:after,这些伪类可以在元素之前或之后插入一个内容生成器,因此可以用它来模拟气泡框的尖角,并添加其他的样式。 示例代码如下: <div class="bubble">这是一个气泡框</d…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部