只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)

下面我就来详细讲解这篇文章中的“只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)”的完整攻略。

1. 确定需求和目标

在开始制作前，我们首先需要明确我们要实现的功能和效果。在这篇文章中，我们的目标是制作一个便签贴特效，这个特效需要包含以下几个要素：

• 一个可拖拽的便签贴
• 点击便签贴时，弹出一个模态框，用于编辑便签内容
• 点击模态框中的保存按钮后，保存编辑后的便签内容，并关闭模态框
• 点击便签贴右上角的关闭按钮时，删除该便签贴

2. HTML结构

接下来，我们需要设置HTML的基本结构，包括：

• 一个放置便签贴的容器
• 一个模态框，用于编辑便签内容

示例代码：

<div class="container">
  <div class="note"></div>
</div>

<div class="modal">
  <div class="modal-body">
    <textarea></textarea>
  </div>
  <div class="modal-footer">
    <button class="btn-save">保存</button>
    <button class="btn-cancel">取消</button>
  </div>
</div>

其中，容器使用一个class为container的div来实现，便签贴使用一个class为note的div来实现，模态框使用一个class为modal的div来实现。

3. CSS样式

接下来，我们需要设置CSS样式，包括：

• 容器和便签贴的基本样式
• 便签贴的拖拽效果
• 模态框的样式和显示效果

示例代码：

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.note {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: 1px solid black;
  cursor: move;
}

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.modal-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  padding: 10px;
  border-top: 1px solid gray;
  display: flex;
  justify-content: flex-end;
}

.modal-footer .btn-save {
  margin-right: 10px;
}

其中，给便签贴添加dragable类可以实现拖拽效果，具体实现方式可以参考文章中的示例代码。

4. JavaScript代码

最后，我们需要编写JavaScript代码，实现以下功能：

• 点击便签贴时，弹出模态框，并将当前便签贴的内容显示在模态框中
• 点击模态框中的保存按钮，保存编辑后的内容，并关闭模态框
• 点击便签贴右上角的关闭按钮，删除该便签贴

示例代码：

var note = null;
var modal = null;
var modalTextarea = null;
var btnSave = null;
var btnCancel = null;

// 初始化
function init() {
  note = document.querySelector('.note');
  modal = document.querySelector('.modal');
  modalTextarea = document.querySelector('.modal-body textarea');
  btnSave = document.querySelector('.modal-footer .btn-save');
  btnCancel = document.querySelector('.modal-footer .btn-cancel');

  note.addEventListener('click', function() {
    // 显示模态框
    showModal();
    // 把当前便签贴的内容显示在模态框中
    modalTextarea.value = note.innerText;
  });

  btnSave.addEventListener('click', function() {
    // 保存修改
    note.innerText = modalTextarea.value;
    // 关闭模态框
    closeModal();
  });

  btnCancel.addEventListener('click', function() {
    // 关闭模态框
    closeModal();
  });
}

// 显示模态框
function showModal() {
  modal.style.display = 'block';
}

// 关闭模态框
function closeModal() {
  modal.style.display = 'none';
}

// 删除当前便签贴
function deleteNote() {
  note.parentNode.removeChild(note);
}

init();

最后，我们的便签贴特效就制作完成了。