请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

亿仁网

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 507|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2019-3-14 22:24
  • 签到天数: 160 天

    [LV.7]常住居民III

    1074

    主题

    1139

    帖子

    1万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    18046
    发表于 2017-6-12 12:40:53 | 显示全部楼层 |阅读模式

    虽然可以使用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>
    复制代码


    造物之前,必先造人。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|亿仁网 ( 粤ICP备16098737  

    GMT+8, 2021-3-8 11:27 , Processed in 0.070060 second(s), 26 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表