前端的一些关于弹窗的问题

快来打我* 2023-06-23 13:14 1阅读 0赞

这两天在开发的时候遇到了一个问题，产品部的需求是如下这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70][]

点击提交后会做判断，如果满足某个条件，则弹出如上弹窗。在弹窗中点击关闭后，不再执行函数中其余代码；点击仍要提交，执行其余代码。

js的confirm方法实现这个就比较容易了，该函数会弹出弹窗，当点击弹窗按钮后会返回点击的是“确定”-true还是“取消”-false，可以根据这个状态来判断是直接返回还是继续执行其他代码。可是confirm的一个缺陷就是它的样式啊什么的包括按钮的文字都是固定的，如果想使用其他的就需要对函数进行重写(尝试过，嫌麻烦就没有继续了)

放弃了重写后，就开始想着使用其他的方式了，最先想到的是使用miniUI自带的弹窗工具(我们的系统使用的miniUI作为前端框架)，使用它的mini.showMessageBox（options）其中option参数长这个样

{
        title: String,    
        message: String,
        buttons: ["ok", "no", "cancel"],    
        iconCls: "mini-messagebox-question",
        html: String,   
        callback: function(action){
        }
    }

。这个方法很棒，可是又有了新的问题，它的返回值是一个乱七八糟的messageId，貌似没有一点用，不能判断是该继续执行还是终止其余代码。而且更可恶的是，程序在执行这个的同时，也把剩余的代码给执行了，也就是说弹出弹窗后不等用户选择直接执行其余代码。那么自然是不行了。

后来就想着自己写个弹窗，以为会完美，可也是和这个一样的问题。

再后来就跟产品部解释了一番，取消使用“关闭”与“仍要提交”。使用confirm的“取消”和“确定”。

后来又尝试了一下，发现miniUI的mini.confirm也不行，也是不会暂时停住程序的执行

归根到底，还是自己是做后端的，所以在做前端的一些东西才会卡住。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191219114220902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3,size_16,color_FFFFFF,t_70