在.onClick中创建一个弹出框,有个按钮控制弹出框显示隐藏,弹出框右上角有关闭按钮,弹出框中有4*4表格,最后一列是一个按钮,按钮点击会返回当前行的信息 代码:const objectUUIDRenew = new UIButton( '选择' ).setMarginLeft( '7px' ).onClick( function () { objectUUID.setValue( dom.tableData[0].dataId ); console.log('更新',editor,objectData,dom,objectData.userData.twinData.dataType); objectData.userData.twinData.dataId = dom.tableData[0].dataId } );
时间: 2024-02-28 09:55:05 浏览: 26
好的,以下是在 `onClick` 中创建弹出框的示例代码:
```javascript
const objectUUIDRenew = new UIButton( '选择' ).setMarginLeft( '7px' ).onClick( function () {
// 创建弹出框相关元素
var popup = document.createElement('div');
var closeBtn = document.createElement('span');
var table = document.createElement('table');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
// 设置样式
popup.style.position = 'fixed';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.style.backgroundColor = '#fff';
popup.style.border = '1px solid #ccc';
popup.style.padding = '20px';
popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';
closeBtn.innerHTML = '×';
closeBtn.style.position = 'absolute';
closeBtn.style.top = '5px';
closeBtn.style.right = '5px';
closeBtn.style.cursor = 'pointer';
table.style.borderCollapse = 'collapse';
var tableHead = '<tr><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr>';
var tableBody = '<tr><td>张三</td><td>20</td><td>男</td><td><button class="info-btn" data-name="张三" data-age="20" data-gender="男">查看</button></td></tr>' +
'<tr><td>李四</td><td>25</td><td>女</td><td><button class="info-btn" data-name="李四" data-age="25" data-gender="女">查看</button></td></tr>' +
'<tr><td>王五</td><td>30</td><td>男</td><td><button class="info-btn" data-name="王五" data-age="30" data-gender="男">查看</button></td></tr>' +
'<tr><td>赵六</td><td>35</td><td>女</td><td><button class="info-btn" data-name="赵六" data-age="35" data-gender="女">查看</button></td></tr>';
thead.innerHTML = tableHead;
tbody.innerHTML = tableBody;
// 按钮点击事件
tbody.querySelectorAll('.info-btn').forEach(function(btn) {
btn.addEventListener('click', function() {
var name = btn.dataset.name;
var age = btn.dataset.age;
var gender = btn.dataset.gender;
console.log(name, age, gender); // 这里可以根据需求做其他操作
});
});
// 将元素添加到页面中
popup.appendChild(closeBtn);
popup.appendChild(table);
table.appendChild(thead);
table.appendChild(tbody);
document.body.appendChild(popup);
// 弹出框显示隐藏控制
closeBtn.addEventListener('click', function() {
document.body.removeChild(popup);
});
});
```
这段代码在 `onClick` 中创建了一个弹出框,并实现了表格中按钮的点击事件。其中,使用了原生 JavaScript 操作 DOM 元素。在创建弹出框时,先创建相关元素,设置样式,然后将它们添加到页面中;在弹出框显示隐藏控制时,监听关闭按钮的点击事件,移除弹出框元素。需要注意的是,由于这段代码是针对你提供的代码进行的修改,其中可能有一些变量和函数并没有给出定义,需要根据实际情况进行修改。