【APICloud系列|29】dialogBox模块（对话框）的实现

导读：dialogBox 封装了十一种款式的对话框，每一种款式都提供一个接口来调用，开发者可按照各个接口的样式来自定义对话框上的文字、图片、图文等

把 dialogBox 模块的 11 个样式分别实现个简单的效果，其中将 alert 方法做了两个样式，如果你觉得我写的样式够丑，请不要喷我，因为我是程序猿[呵呵了]，如果你接受了就直接用到你的项目，否则自己再根据官方的文档和结合自己的产品需求，来定义更多高大上的样式。

接下来我拿几个我常用的方法给大家简单介绍下，其它的大家可以看看模块的视频效果以后，自己上手做做。

• alert()
   

这个方法算是系统的 alert 与 confirm 的结合，这之上还可以添加 icon。

• sendMessage()
   

顾名思义，此方法在 alert 的基础之上追加了一个对话框，会调用中可以取到输入的值。

• scene()
   

此方法是一个特定场景下的 UI 弹出层，它包含可设置场景图片、标题以及选项。

• evaluation()
   

与 alert 类似，只不过将按钮的排版做了修改。

• raffle()
   

该方法算是 scene 与 alert 的结合，效果可见此模块视频演示。

• receipt()
   

在很多场景中我们就会有，比如一些简单到复杂的表单数据展示，通常这样的布局比较麻烦而繁琐。这个方法就是由此而生呀，简单配置下，就能够达到目的。

• tips()
   

其实我觉得这个方法除了和名字说的提示功能以外，还有 N 多的使用场景，所以大家别被方法的名称给固定了使用的范围。

• actionMenu()
   

这个方法的 UI 与 shareAction 模块类似，差别就是这个方法并没有实际的功能，不过通常情况下系统的很多功能并不是我们的产品想要的，我们需要自定义 UI 和功能，所以这里这个方法就起了大作用。

以上所有方法，我也都只是简单的用了下，大家在使用此模块的时候仔细看看文档，毕竟是 UI 模块，又要做到自定义，所以字段什么的太多了，一不注意你就疏忽了什么。在使用模块时，任何一个按钮点击时都有返回对应的索引，然后我们就可以根据索引去做自己的逻辑。

项目结构：

config.xml

  对话框的实现
  
  58DCDC
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

index.html

    
        
        
        
        
    
    
        

            
dialogBox
            
                使用前请详细阅读 文档 使用规则
            
        
         dialogBox_alert1 
         dialogBox_alert2 
         dialogBox_sendMessage 
         dialogBox_scene 
         dialogBox_evaluation 
         dialogBox_raffle 
         dialogBox_taskPlan 
         dialogBox_receipt 
         dialogBox_tips 
         dialogBox_discount 
         dialogBox_share 
         dialogBox_actionMenu 

 完整代码下载地址：https://download.csdn.net/download/weixin_41937552/13993289