自制轻量级仿jQuery.boxy对话框插件代码

下面是“自制轻量级仿jQuery.boxy对话框插件代码”的完整攻略。

具体步骤

1. HTML结构

首先在HTML中添加一个用于显示对话框的div，并在其中添加与对话框相关的元素：

<div id="boxy-wrapper">
  <div class="boxy-overlay"></div>
  <div class="boxy-container">
    <div class="boxy-title">Title</div>
    <div class="boxy-content">Content</div>
  </div>
</div>

其中，boxy-overlay表示半透明的遮罩层，boxy-container表示对话框的容器，boxy-title和boxy-content则分别表示标题和内容。

2. CSS样式

其次，在CSS中设置对话框的样式，包括对话框的位置、大小、样式等：

#boxy-wrapper {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.boxy-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.5;
  z-index: 1;
}

.boxy-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  width: 400px;
  z-index: 2;
}

.boxy-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.boxy-content {
  font-size: 14px;
}

其中，#boxy-wrapper设置对话框容器的位置和大小为全屏，同时设置z-index为9999，确保对话框始终处于最前方。boxy-overlay设置遮罩层的样式，boxy-container设置对话框的位置和大小，boxy-title和boxy-content则设置对话框的标题和内容的样式。

3. JavaScript代码

接着，在JavaScript中实现对话框相关的功能，包括显示、隐藏、设置标题和内容等操作：

var boxy = {
  show: function(title, content) {
    var wrapper = document.getElementById('boxy-wrapper');
    var titleEl = wrapper.querySelector('.boxy-title');
    var contentEl = wrapper.querySelector('.boxy-content');
    titleEl.innerHTML = title;
    contentEl.innerHTML = content;
    wrapper.style.display = 'block';
  },
  hide: function() {
    var wrapper = document.getElementById('boxy-wrapper');
    wrapper.style.display = 'none';
  }
};

其中，boxy.show方法用于显示对话框，并将标题和内容设置为传入的参数；boxy.hide方法用于隐藏对话框。

4. 示例说明

下面为两个示例说明：

示例1：显示并隐藏对话框

// 显示对话框
boxy.show('Title1', 'Content1');

// 3秒后隐藏对话框
setTimeout(function() {
  boxy.hide();
}, 3000);

执行以上代码后，会显示一个标题为“Title1”，内容为“Content1”的对话框，并在3秒后自动隐藏。

示例2：点击按钮显示对话框

<button id="show-boxy">Show Box</button>

// 点击按钮显示对话框
document.getElementById('show-boxy').addEventListener('click', function() {
  boxy.show('Title2', 'Content2');
});

执行以上代码后，当点击按钮时，会显示一个标题为“Title2”，内容为“Content2”的对话框。

总结

通过以上步骤，我们实现了一个简单的对话框插件，可以通过显示、隐藏、设置标题和内容等操作来控制对话框的行为。我们可以在此基础上不断完善，加入更多的功能，实现更强大的插件。