心静自然梁呢 2023-04-18 11:47 采纳率: 100%
浏览 28
已结题

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

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

img

  • 写回答

2条回答 默认 最新

  • Lemon2050 2023-04-18 12:37
    关注
    
<!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 4月26日
  • 已采纳回答 4月18日
  • 创建了问题 4月18日

悬赏问题

  • ¥15 乌班图ip地址配置及远程SSH
  • ¥15 怎么让点阵屏显示静态爱心，用keiluVision5写出让点阵屏显示静态爱心的代码，越快越好
  • ¥15 PSPICE制作一个加法器
  • ¥15 javaweb项目无法正常跳转
  • ¥15 VMBox虚拟机无法访问
  • ¥15 skd显示找不到头文件
  • ¥15 机器视觉中图片中长度与真实长度的关系
  • ¥15 fastreport table 怎么只让每页的最下面和最顶部有横线
  • ¥15 java 的protected权限 ，问题在注释里
  • ¥15 这个是哪里有问题啊？