给我一个代码案例，首先有一个盒子，盒子旁边有一个按钮，点击按钮之后出现一个弹窗，可以选择改变盒子大小和颜色，都是使用鼠标移入来改变的，然后话有两个按钮一个是确定样式，一个是取消

很高兴为您提供一个代码案例，以下是使用 HTML、CSS 和 JavaScript 实现的盒子大小和颜色改变的弹窗：

HTML 代码：

<div id="box"></div>
<button id="btn">改变盒子</button>
<div id="popup">
  <h2>改变盒子样式</h2>
  <label>宽度：<input type="range" id="width" min="50" max="500" value="200"></label>
  <label>高度：<input type="range" id="height" min="50" max="500" value="200"></label>
  <label>颜色：<input type="color" id="color" value="#ff0000"></label>
  <button id="confirm">确定</button>
  <button id="cancel">取消</button>
</div>

CSS 代码：

#box {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  margin: 20px;
}

#popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#popup label {
  display: block;
  margin-bottom: 10px;
}

#popup button {
  margin-top: 20px;
  margin-right: 10px;
}

#confirm {
  background-color: #4caf50;
  color: #fff;
  border: none;
}

#cancel {
  background-color: #f44336;
  color: #fff;
  border: none;
}

JavaScript 代码：

var box = document.getElementById('box');
var btn = document.getElementById('btn');
var popup = document.getElementById('popup');
var width = document.getElementById('width');
var height = document.getElementById('height');
var color = document.getElementById('color');
var confirm = document.getElementById('confirm');
var cancel = document.getElementById('cancel');

btn.addEventListener('click', function() {
  popup.style.display = 'block';
});

confirm.addEventListener('click', function() {
  box.style.width = width.value + 'px';
  box.style.height = height.value + 'px';
  box.style.backgroundColor = color.value;
  popup.style.display = 'none';
});

cancel.addEventListener('click', function() {
  popup.style.display = 'none';
});

当用户点击按钮时，弹窗会出现，用户可以使用滑块和颜色选择器来改变盒子的大小和颜色，然后用户可以点击“确定”按钮来应用更改，或者点击“取消”按钮来关闭弹窗。