心静自然梁呢 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 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。