微信小程序中dialog----常见提示框

edu83

虽然可以使用JavaScript中的alert和confirm函数构建警告弹框和确认弹框，但在实际使用中可定制化的内容较少，所以在WeUI中可以使用自定义的Dialog弹出层，方便更多的需求开发。

下面通过一个小实例来展示Dialog的具体用法。用户在页面上单击“确认框”按钮后弹出选择确认框。用户再次单击选择确认框上的“警告框”按钮后弹出警告框Dialog。其中用户单击两个Dialog的“取消”按钮都可以隐藏任意的弹出层。

首先在页面上定义一个按钮和两个不同样式的Dialog，其中两个Dialog默认为隐藏状态。核心代码如下：

1. <a href="javascript:;" class="weui_btn weui_btn_primary"
   
2.         id="showDialog1">确认框</a>
   
3. <div class="weui_dialog_confirm" id="dialog1" style="display: none;">
   
4.         <div class="weui_mask"></div>
   
5.         <div class="weui_dialog">
   
6.                 <div class="weui_dialog_hd">
   
7.                         <strong class="weui_dialog_title">弹窗标题</strong>
   
8.                 </div>
   
9.                 <div class="weui_dialog_bd">自定义弹窗内容，居左对齐显示，告知需要确认的信息等</div>
   
10.                 <div class="weui_dialog_ft">
    
11.                         <a href="javascript:;" class="weui_btn_dialog default cancelDialog">取消</a>
    
12.                         <a href="javascript:;" class="weui_btn_dialog primary showSecond">警告框</a>
    
13.                 </div>
    
14.         </div>
    
15. </div>
    
16. <div class="weui_dialog_alert" id="dialog2" style="display: none;">
    
17.         <div class="weui_mask"></div>
    
18.         <div class="weui_dialog">
    
19.                 <div class="weui_dialog_hd">
    
20.                         <strong class="weui_dialog_title">弹窗标题</strong>
    
21.                 </div>
    
22.                 <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
    
23.                 <div class="weui_dialog_ft">
    
24.                         <a href="javascript:;" class="weui_btn_dialog primary cancelDialog">确定</a>
    
25.                 </div>
    
26.         </div>
    
27. </div>

复制代码

其次需要编写JavaScript脚本，为页面中的不同按钮绑定click事件，用来控制两个Dialog的弹出框显示和关闭隐藏，核心代码如下：

1. <script type="text/javascript">
   
2.         $(function(){
   
3.                 // 单击桌面按钮弹出样式一
   
4.                 $('#showDialog1').click(function(){
   
5.                         $('#dialog1').show();
   
6.                 })
   
7.                 // 单击取消按钮关闭Dialog
   
8.                 $('.cancelDialog').click(function(){
   
9.                         $('.weui_dialog_confirm').hide();        //隐藏所有样式一Dialog
   
10.                         $('.weui_dialog_alert').hide();                //隐藏所有样式二Dialog
    
11.                 })
    
12.                 // 单击按钮弹出样式二
    
13.                 $('.showSecond').click(function(){
    
14.                         $('.weui_dialog_confirm').hide();        //隐藏所有的Dialog
    
15.                         $('#dialog2').show();                                //显示所需要的Dialog
    
16.                 })
    
17.         })
    
18. </script>

复制代码