使用onclick跳出弹窗确认是否删除

跳出弹窗确认是否删除

<button  th:title="删除" style="text-decoration:none" type="button"
         th:value="${goods.goodsId}" onclick="deleteGood(this.value)">
    <i class="layui-icon">&#xe640;</i>
</button>
<script>
//确认是否删除商品(当前行)弹窗
function deleteSure(){
    var r = confirm("确认要删除该商品吗?");
    if (r == true) {
        layer.msg('已删除!',{icon:1,time:1000});
        return true;
    } else {
        layer.msg('未删除!',{icon:2,time:1000});
        return false;
    }
}

//删除货物
function deleteGood(goodsId) {
    if(deleteSure()==true) {
        var param = {"goodsId": goodsId};
        $.post("/deleteGood", param, function (data) {
            if (data.state == 200) {
                layer.msg(data.message, {icon: 1, time: 1000});
                location.href = "/findAllGoodsByUid";
            } else {
                layer.msg(data.message, {icon: 2, time: 1000});
            }
        })
    }
}
</script>

在这里插入图片描述

可以使用以下代码实现: HTML代码: ```html <span onclick="showImages()">点击查看图片</span> <div id="imageModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="image"> </div> ``` CSS样式: ```css /* 弹窗样式 */ .modal { display: none; /* 默认隐藏 */ position: fixed; /* 固定定位 */ z-index: 1; /* 设置层级 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* 添加滚动条 */ background-color: rgb(0,0,0); /* 设置背景颜色 */ background-color: rgba(0,0,0,0.9); /* 设置背景颜色透明度 */ } /* 弹窗内容样式 */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; max-height: 80%; } /* 关闭按钮样式 */ .close { position: absolute; top: 0; right: 0; padding: 15px; color: #fff; font-size: 35px; font-weight: bold; cursor: pointer; } ``` JavaScript代码: ```javascript // 图片数组 var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; // 获取弹窗和图片元素 var modal = document.getElementById("imageModal"); var img = document.getElementById("image"); // 点击事件处理函数 function showImages() { // 显示弹窗 modal.style.display = "block"; // 显示第一张图片 img.src = images[0]; // 当前显示的图片索引 var index = 0; // 点击弹窗以外区域关闭弹窗 modal.onclick = function() { modal.style.display = "none"; }; // 点击图片切换下一张 img.onclick = function() { index++; if (index >= images.length) { index = 0; } img.src = images[index]; }; } ``` 解释: 1. HTML代码中,`span`标签设置了一个`onclick`事件,当用户点击这个元素时,会触发`showImages()`函数。 2. `showImages()`函数中,首先获取弹窗和图片元素,并设置弹窗的显示样式和显示第一张图片。 3. 然后添加了两个事件处理函数:点击弹窗以外区域关闭弹窗和点击图片切换下一张。 4. 最后,将弹窗和图片元素显示出来。 注意:本代码仅做示例,实际应用中可能需要对弹窗样式、图片数组等进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值