代码实现:点击按钮出现确认弹窗

<!DOCTYPE html>
<html>
<head>
    <title>Confirmation Pop-up</title>
    <script>
        function confirmAction() {
            // 弹出确认框
            var confirmation = confirm("确定执行操作吗?");
            // 如果用户点击了确认,继续执行后续操作
            if (confirmation) {
                // 这里可以添加执行的操作,比如跳转页面或者提交表单
                alert("操作已确认");
            } else {
                // 如果用户点击了取消,可以选择不执行任何操作,或者给出提示
                alert("操作已取消");
            }
        }
    </script>
</head>
<body>

<button onclick="confirmAction()">点击执行操作</button>

</body>
</html>

可以使用HTML、CSS和JavaScript实现这个功能。以下是一个简单的实现方式: HTML代码: ``` <button id="change-password-btn">修改密码</button> <div id="change-password-modal" class="modal"> <div class="modal-content"> <span class="close">×</span> <h2>修改密码</h2> <form> <label for="old-password">旧密码:</label> <input type="password" id="old-password" name="old-password"><br><br> <label for="new-password">新密码:</label> <input type="password" id="new-password" name="new-password"><br><br> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password" name="confirm-password"><br><br> <input type="submit" value="提交"> </form> </div> </div> ``` CSS代码: ``` /* 遮罩层样式 */ .modal { display: none; /* 默认不显示 */ position: fixed; /* 固定定位 */ z-index: 1; /* 设置层级 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* 当内容溢出时,滚动条可见 */ background-color: rgba(0, 0, 0, 0.5); /* 背景半透明黑色 */ } /* 弹窗样式 */ .modal-content { background-color: #fefefe; /* 弹窗背景色 */ margin: 10% auto; /* 居中对齐 */ padding: 20px; border: 1px solid #888; width: 40%; /* 设置弹窗宽度 */ } /* 关闭按钮样式 */ .close { float: right; font-size: 28px; font-weight: bold; } /* 关闭按钮悬停样式 */ .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } ``` JavaScript代码: ``` // 获取按钮弹窗元素 var btn = document.getElementById("change-password-btn"); var modal = document.getElementById("change-password-modal"); // 获取关闭按钮元素 var close = modal.getElementsByClassName("close")[0]; // 当用户点击按钮时,显示弹窗 btn.onclick = function() { modal.style.display = "block"; } // 当用户点击关闭按钮时,隐藏弹窗 close.onclick = function() { modal.style.display = "none"; } // 当用户点击遮罩层时,隐藏弹窗 window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } ``` 上述代码实现一个简单的点击按钮弹出修改密码弹窗的功能。其中,使用了CSS中的fixed定位和JavaScript中的事件监听功能,实现弹窗的显示和隐藏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值