网站开发语言net,南宁江南区网站制作价格,网页设计6种布局方式,wordpress 编辑插件概要 在odoo15或者在15之前#xff0c;odoo前端的owl框架还没完全替换当前前端框架的时候#xff0c;我们很多时候都是用js或者jq来直接操作dom#xff0c;那么我们如果需要在前端用到一个模态弹窗#xff0c;可以怎么解决呢#xff1f;
方法1 直接用js原生的模态弹窗odoo前端的owl框架还没完全替换当前前端框架的时候我们很多时候都是用js或者jq来直接操作dom那么我们如果需要在前端用到一个模态弹窗可以怎么解决呢
方法1 直接用js原生的模态弹窗当然这个个好办法。但是有时候甲方可能会不买单觉得太丑了他们想要跟odoo系统的弹窗一样的样式才乐意。 let msgconfirm(你好呀?);if(msgtrue){ console.log(我很好); }else{ console.log(一般般吧); } 方法2 通过Bootstrap自定义一个然后在需要用到的地方调用即可。因为odoo的UI框架本身就是Bootstrap所以定义出来的弹窗也能达到更好的视觉效果。
//自定义弹窗只需要把该方法导进需要用到的地方通过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 classmodal fade idmyExampleModalCenter tabindex-1 roledialog aria-labelledbyexampleModalCenterTitle aria-hiddentruediv classmodal-dialog modal-dialog-centered roledocumentdiv classmodal-contentdiv classmodal-headerh5 classmodal-title idexampleModalCenterTitle title /h5button typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentruex/span/button/divdiv classmodal-body popupTxt /divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-dismissmodal no /buttonbutton typebutton classbtn btn-primary idzd_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(取消)}
}) 小结 多写多敲多思考毕竟知己知彼才能看懂源码。
