使用 muiconfirm 弹出确认框并且点击其他地方的时候 确认框关闭不要回调mui函数
可以使用mui的popover组件来实现这个功能。具体步骤如下:
- 引入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>
- 在需要弹出确认框的元素上添加data-popover属性:
<button class="mui-btn" data-popover="#popover">点击弹出确认框</button>
- 在页面底部添加确认框的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>
- 在页面底部添加js代码,实现点击其他地方关闭确认框的功能:
mui('body').on('tap', function(e) {
if (e.target.tagName !== 'BUTTON' && e.target.getAttribute('data-popover') !== '#popover') {
mui('#popover').popover('hide');
}
});
- 在页面底部添加js代码,实现点击确认和取消按钮的功能:
mui('#confirm').on('tap', function() {
// 点击确认按钮的逻辑
mui('#popover').popover('hide');
});
mui('#cancel').on('tap', function() {
// 点击取消按钮的逻辑
mui('#popover').popover('hide');
});
这样就可以实现点击其他地方关闭确认框的功能了。
原文地址: https://www.cveoy.top/t/topic/b5XC 著作权归作者所有。请勿转载和采集!