js点击按钮弹出输入框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Button to Popup Input</title>
<script>
function popupInput() {
    // 创建一个新的input元素
    var inputElement = document.createElement('input');
    inputElement.type = 'text';
    inputElement.placeholder = '请输入内容';

    // 创建一个用于容纳input的div
    var divElement = document.createElement('div');
    divElement.style.position = 'fixed';
    divElement.style.top = '50%';
    divElement.style.left = '50%';
    divElement.style.transform = 'translate(-50%, -50%)';
    divElement.style.backgroundColor = 'white';
    divElement.style.padding = '20px';
    divElement.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
    divElement.appendChild(inputElement);

    // 将div添加到body中
    document.body.appendChild(divElement);

    // 监听input的回车事件
    inputElement.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            alert('你输入的内容是: ' + inputElement.value);
            document.body.removeChild(divElement); // 移除弹出框
        }
    });

    // 监听div的点击事件，点击外部区域关闭弹出框
    divElement.addEventListener('click', function(event) {
        if (event.target === divElement) {
            document.body.removeChild(divElement);
        }
    });
}
</script>
</head>
<body>

<button onclick="popupInput()">点击弹出输入框</button>

</body>
</html>