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

概要

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

方法1

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

    let msg=confirm("你好呀?");if(msg==true){   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 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('取消')}
})

 

小结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/853359.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle的这些BUG你要遇到,说明你是一个DBA老鸟...

作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯及Greenplum备份恢复&#xff0c; 安装迁移&#xff0c;性能优化、故障…

采用卷积神经网络分类MNIST数据集与基础知识

卷积神经网络 (CNN) 分类 MNIST 数据集的基础知识 1. MNIST 数据集简介 MNIST(Modified National Institute of Standards and Technology)数据集是一个手写数字的图像数据库,用于机器学习领域中的图像分类任务。它包含60,000张训练图像和10,000张测试图像,图像大小为28x…

WED前端做什么:深度剖析与实用指南

WED前端做什么&#xff1a;深度剖析与实用指南 在当今数字化浪潮中&#xff0c;前端开发已成为互联网领域不可或缺的一部分。WED前端作为其中的关键角色&#xff0c;肩负着构建优质用户体验的重任。那么&#xff0c;WED前端具体做什么呢&#xff1f;本文将从四个方面、五个方面…

39python数据分析numpy基础之h5py读写数组数据到h5文件

1 python数据分析numpy基础之h5py读写数组数据到h5文件 HDF5(分层数据格式文件)是Hierarchical Data Format Version 5的缩写&#xff0c;是一种用于存储和管理大数据的文件格式。经历了20多年的发展&#xff0c;HDF格式的最新版本是HDF5&#xff0c;它包含了数据模型&#xf…

【LVGL】Guider 界面分析

文章目录 前言架构创建 UI切换界面空间释放分析创建页面空间变化 前言 分析Gui Guider-1.7.2-GA 生成的 LVGL 界面切换&#xff0c;资源管理等处理 架构 所有控件存放于同一个结构体 lv_ui 内&#xff0c;每个页面都至少包含 screen_xxx 和 screen_xxx_del 两个成员 typede…

用HAL库改写江科大的stm32入门-7-1 ADC

实验目的:了解ADC基本概念 电路图&#xff1a; ADC&#xff08;Analog-Digital Converter&#xff09;模拟-数字转换器&#xff0c;它可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁。 实验效果&#xff1a; &#xff0…

【html】学会这一套布局,让你的网页更加

很多小伙伴们在刚刚开始学习网页设计的时候不知道怎么布局今天给大家介绍一种非常实用且更加专业的一种布局。 灵感来源&#xff1a; 小米官网 布局图; 实例效果图&#xff1a; 这是一个简单的HTML模板&#xff0c;包括头部、内容区域和底部。 头部部分包括一个分为左右两部分…

【代码随想录】【算法训练营】【第39天】 [62]不同路径 [63]不同路径II [343]整数拆分 [96]不同的二叉搜索树

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 39&#xff0c;周六&#xff0c;坚持不住了~ 题目详情 [62] 不同路径 题目描述 62 不同路径 解题思路 前提&#xff1a;每次只能向下或者向右移动一步 思路&#xff1a;动态规划&#xff0…

部署LVS-DR群集...

目录 最后一台主机&#xff08;第四台&#xff09; 本地yum源安装httpd&#xff08;非必做&#xff09; 继续开始从最后一台主机开始&#xff08;第四台&#xff09; 转第二台主机 转第三台主机 回第二台 上传 转第三台主机 上传 回第二台 转第三台 转第一台主机…

Linux Kernel入门到精通系列讲解(RV-Kernel 篇) 5.5 RTC设备编写与实现

1. 概述 上一章节我们已经在QEMU中添加了RTC设备,本章节我们就把RTC设备给移植进入kernel中运行起来,我们移植的Google goldfish_rtc设备,此IP已经在Linux kernel有了Driver,所以我们直接移植设备树即可。 RTC时钟是用来记录当前系统时间的;对于Linux系统来说,时间是一…

Java 项目学习(初始化项目)

后端工程基于 maven 进行项目构建&#xff0c;并且进行分模块开发 参考&#xff1a;Spring或Spring Boot项目目录结构划分和代码分层 1、了解项目的整体结构 sky-take-out maven 父工程&#xff0c;统一管理依赖版本&#xff0c;聚合其他子模块 sky-common 子模块&#xff0c…

【背包题】oj题库

目录 1282 - 简单背包问题 1780 - 采灵芝 1888 - 多重背包&#xff08;1&#xff09;​编辑 1891 - 开心的金明 2073 - 码头的集装箱 1905 - 混合背包 1282 - 简单背包问题 #include <bits/stdc.h> using namespace std; //二维数组:dp[i][j]max(dp[i-1][j],v[i]dp[…

CSS动画(登录页面)

1.整体效果 https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6Pfop3IiakrZOtiaiaKniaxeH2Gs407DmkXPsMo8AFKdsYibYcpZiboc24Ulic2CicmyvHmnwCrib7MDe6Jvg/640?wx_fmtgif&fromappmsg&tpwebp&wxfrom5&wx_lazy1&wx_co1 2.完整代码 HTML <!DOCTYPE html&g…

Oracle备份失败处理,看这一篇就够了!

作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯及Greenplum备份恢复&#xff0c; 安装迁移&#xff0c;性能优化、故障…

FLAN-T5模型的文本摘要任务

Text Summarization with FLAN-T5 — ROCm Blogs (amd.com) 在这篇博客中&#xff0c;我们展示了如何使用HuggingFace在AMD GPU ROCm系统上对语言模型FLAN-T5进行微调&#xff0c;以执行文本摘要任务。 介绍 FLAN-T5是谷歌发布的一个开源大型语言模型&#xff0c;相较于之前的…

第一页总结

第一页总结 链表反转206. 反转链表25. K 个一组翻转链表 双指针21. 合并两个有序链表141. 环形链表 链表 反转 206. 反转链表 206. 反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 递归思路&#xff1a; 每一个子递归都将当前…

什么是专业的CRM客户管理系统,介绍crm客户管理系统的功能作用

CRM&#xff08;Customer Relationship Management&#xff09;客户管理系统&#xff0c;是现代企业不可或缺的一款管理工具。它集客户信息管理、销售自动化、客户服务与支持、数据分析与决策支持等多项功能于一身&#xff0c;帮助企业实现客户关系的全方位管理&#xff0c;从而…

浏览器必备插件:最新Allow copy万能网页复制下载,解锁网页限制!

今天阿星给大家安利一个超级实用的小工具&#xff0c;专治那些“禁止复制”的网页文字。学生党、资料搜集狂人&#xff0c;你们有福了&#xff01; 想象一下&#xff0c;你在网上冲浪&#xff0c;突然遇到一篇干货满满的文章&#xff0c;正想复制下来慢慢品味&#xff0c;结果…

CubeMX Keil Configure

// 使用外部高速晶振 外部高速晶振为8M&#xff08;根据开发板上的晶振频率设置&#xff09;&#xff0c;使用 PLLCLK&#xff0c;HSE 选项 USART1 使用 Asynchronous&#xff0c;PA9&#xff0c;PA10引脚&#xff08;USART1 引脚根据开发板上引脚设置&#xff09; 设置MDK AR…

Docker Nginx

Docker官网 https://www.docker.com/https://www.docker.com/ 删除原先安装的Docker sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ …