JavaScript动态创建模态框元素 - 复选框、输入框和按钮

在模态框内动态创建复选框、输入框和按钮可以通过以下步骤实现：

1. 创建一个模态框元素，可以使用HTML的<div>元素，并设置一个唯一的ID作为标识符。

<div id='modal'></div>

2. 使用JavaScript获取模态框元素，并在其内部动态创建复选框、输入框和按钮。

// 获取模态框元素
var modal = document.getElementById('modal');

// 创建复选框
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
modal.appendChild(checkbox);

// 创建输入框
var input = document.createElement('input');
input.type = 'text';
modal.appendChild(input);

// 创建按钮
var button = document.createElement('button');
button.innerHTML = '按钮';
modal.appendChild(button);

3. 可以通过CSS对模态框进行样式设置，例如设置位置、大小、背景色等。

#modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: white;
  padding: 20px;
}

4. 在需要触发模态框的地方，添加一个事件监听器，当触发事件时显示模态框。

// 获取触发模态框的按钮元素
var triggerBtn = document.getElementById('trigger-btn');

// 添加事件监听器
triggerBtn.addEventListener('click', function() {
  modal.style.display = 'block';
});

这样就可以在模态框内动态创建复选框、输入框和按钮了。

至于小人的实现方式，可以使用CSS的position属性和transform属性来设置元素的位置和旋转角度。