可以使用mui的popover组件来实现这个功能。具体步骤如下:

  1. 引入mui的popover组件和css文件:
<link rel="stylesheet" href="//cdn.muicss.com/mui-0.9.17/css/mui.min.css">
<script src="//cdn.muicss.com/mui-0.9.17/js/mui.min.js"></script>
  1. 在需要弹出确认框的元素上添加data-popover属性:
<button class="mui-btn" data-popover="#popover">点击弹出确认框</button>
  1. 在页面底部添加确认框的html代码:
<div id="popover" class="mui-popover">
    <div class="mui-popover-arrow"></div>
    <div class="mui-popover-inner">
        <div class="mui-popover-body">
            <p>确认要执行此操作吗?</p>
        </div>
        <div class="mui-popover-buttons">
            <button class="mui-btn mui-btn-primary mui-btn-outlined" id="confirm">确定</button>
            <button class="mui-btn mui-btn-danger mui-btn-outlined" id="cancel">取消</button>
        </div>
    </div>
</div>
  1. 在页面底部添加js代码,实现点击其他地方关闭确认框的功能:
mui('body').on('tap', function(e) {
    if (e.target.tagName !== 'BUTTON' && e.target.getAttribute('data-popover') !== '#popover') {
        mui('#popover').popover('hide');
    }
});
  1. 在页面底部添加js代码,实现点击确认和取消按钮的功能:
mui('#confirm').on('tap', function() {
    // 点击确认按钮的逻辑
    mui('#popover').popover('hide');
});

mui('#cancel').on('tap', function() {
    // 点击取消按钮的逻辑
    mui('#popover').popover('hide');
});

这样就可以实现点击其他地方关闭确认框的功能了。

使用 muiconfirm 弹出确认框并且点击其他地方的时候 确认框关闭不要回调mui函数

原文地址: https://www.cveoy.top/t/topic/b5XC 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录