【odoo15】前端自定义模态弹窗

概要

在odoo15或者在15之前,odoo前端的owl框架还没完全替换当前前端框架的时候,我们很多时候都是用js或者jq来直接操作dom,那么我们如果需要在前端用到一个模态弹窗,可以怎么解决呢?

方法1

直接用js原生的模态弹窗,当然,这个个好办法。但是有时候甲方可能会不买单,觉得太丑了,他们想要跟odoo系统的弹窗一样的样式才乐意。

javascript 复制代码
    let msg=confirm("你好呀?");
    if(msg==true)
    {   
        console.log('我很好');  
    }
    else{  
        console.log('一般般吧');  
    }

方法2

通过Bootstrap自定义一个,然后在需要用到的地方调用即可。因为odoo的UI框架本身就是Bootstrap,所以定义出来的弹窗也能达到更好的视觉效果。

javascript 复制代码
//自定义弹窗,只需要把该方法导进需要用到的地方,通过displayPopup方法即可调用
const displayPopup = (title, popupTxt, yes, no) => {
    if (!title) {
        title = '标题'
    }
    if (!popupTxt) {
        popupTxt = '模态弹窗内容'
    }
    if (!yes) {
        yes = '确定'
    }
    if (!no) {
        no = '取消'
    }
    return new Promise((resolve, reject) => {
        let zd_popup_window = $('<div class="modal fade" id="myExampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalCenterTitle">' + title + '</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button></div><div class="modal-body">' + popupTxt + '</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">' + no + '</button><button type="button" class="btn btn-primary" id="zd_verification">' + yes + '</button></div></div></div></div>')
        $('body').append(zd_popup_window);
        $('#myExampleModalCenter').modal()
        $('#myExampleModalCenter').on('hidden.bs.modal', function (e) {
            zd_popup_window.remove();
            resolve('false')
        })
        $("#zd_verification").click(() => {
            zd_popup_window.remove();
            resolve('true')
        })
    })
}

//调用方式,也可用await避免回调地狱问题,按照实际情况来
displayPopup('提示', '弹窗提示啦!', '确定', '取消').then((displayPopupFn) => {
    if (displayPopupFn == 'true') {
        console.log('确定')
    } else {
        console.log('取消')
    }
})

小结

多写多敲多思考,毕竟,知己知彼才能看懂源码。

相关推荐
蓝婷儿21 分钟前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐21 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠25 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农25 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛1 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧1 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉2 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能