心静自然梁呢 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 如何在炒股软件中，爬到我想看的日k线
  • ¥15 51单片机中C语言怎么做到下面类似的功能的函数（相关搜索：c语言）
  • ¥15 seatunnel 怎么配置Elasticsearch
  • ¥15 PSCAD安装问题 ERROR: Visual Studio 2013, 2015, 2017 or 2019 is not found in the system.
  • ¥15 (标签-MATLAB|关键词-多址)
  • ¥15 关于#MATLAB#的问题，如何解决？（相关搜索：信噪比，系统容量）
  • ¥500 52810做蓝牙接受端
  • ¥15 基于PLC的三轴机械手程序
  • ¥15 多址通信方式的抗噪声性能和系统容量对比
  • ¥15 winform的chart曲线生成时有凸起