js弹出一个框，可以输入内容，并且下面包含三个按钮

js怎么做出如下的内容：弹出一个框，可以输入内容，并且下面包含三个按钮

img


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS弹出框示例</title>
    <style>
        /* 弹出框的样式 */
        .dialog {
            border: 1px solid #ccc;
            box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 400px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-sizing: border-box;
        }
        /* 按钮的样式 */
        .dialog button {
            margin-right: 10px;
            cursor: pointer;
            background-color: #4caf50;
            border: 1px solid #4caf50;
            color: #fff;
            padding: 5px 15px;
            font-size: 16px;
            border-radius: 3px;
        }
        .dialog button:hover {
            background-color: #3e8e41;
            border: 1px solid #3e8e41;
        }
    </style>
</head>
<body>
    <button onclick="showDialog()">点击弹出框</button>
    <!-- 弹出框 -->
    <div id="dialog" class="dialog" style="display: none;">
        <p>请输入内容：</p>
        <input type="text" id="input">
        <br>
        <button onclick="cancel()">取消</button>
        <button onclick="confirm()">确定</button>
        <button onclick="other()">其他</button>
    </div>
    <!-- js代码 -->
    <script>
        // 显示弹出框
        function showDialog() {
            var dialog = document.getElementById("dialog");
            dialog.style.display = "block";
        }
        // 隐藏弹出框
        function hideDialog() {
            var dialog = document.getElementById("dialog");
            dialog.style.display = "none";
        }
        // 取消按钮的点击事件
        function cancel() {
            alert("您点击了取消按钮！");
            hideDialog();
        }
        // 确定按钮的点击事件
        function confirm() {
            var input = document.getElementById("input").value;
            alert("您输入的内容是：" + input);
            hideDialog();
        }
        // 其他按钮的点击事件
        function other() {
            alert("您点击了其他按钮！");
        }
    </script>
</body>
</html>