当前位置:主页 > 微信开发 > WeUI >

微信网页开发操作反馈对话框Dialog

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-05
  无论是网站网页还是微信网页与用户交互是一项重要的内容,因为,与用户交互可以增加用户的体验,例如,当用户在微信小程序里面购买服装时,需要选择服装的大小,如果没有选择的话,小程序应当给用户一个提示“请您选择衣服的大小尺寸”,如果没有这个提示那么用户可能买的服装并不适合自己,这样不仅对用户不友好,而且,对小程序或网站来说会增加负面影响。

  在做小程序开发时如果使用WeUI框架的话,那么,这个框架提供了对话框Dialog用来与用户交互,对话框分两种,一种是Alert类型的警告弹框,一种是Confirm,确认弹框。

Alert警告弹框

  Alert警告弹框用于提醒、警告用户简单扼要的信息,只有一个“确认”按钮,点击“确认”按钮后关闭弹框。

Alert

Alert代码:

<div id="dialog1" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
        <div class="weui-dialog__bd">弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
        </div>
    </div>
</div>

Confirm确认弹框

  Confirm,确认弹框,功能类似于浏览器自带的 confirm 和 prompt 的集合,可以用于让用户确认/取消确认,也可以让用户填写表单。

comfirm

Confirm代码:

<div id="dialog1" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
        <div class="weui-dialog__bd">弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
        </div>
    </div>
</div>

对话框结构:

  1)遮罩的设置:在对话框兄弟级别有一个CSS遮罩,即.weui-mask类,这个类会把整个手机屏幕用灰色的背景覆盖掉,是为了突出对话框(一般的对话框背景色为白色)。

  2)对话框容器:整个对话框Dialog在最外层的容器 .weui-dialog里面,这个类设置的堆叠(z-index)值是5000,显示大于遮罩层的z-index值,这样对话框就不会被遮罩层给遮罩掉了,也就看到了对话框了。

  类weui-dialog 的宽度是80%,最大宽度为300px;距离左上、左下为50%,文本居中;边框为3px。

  在对话框容器.weui-dialog 里面也分为head,body和foot,分别对应的对话框类是.weui-dialog__hd、.weui-dialog__bd和weui-dialog__ft。

  在类weui-dialog__hd里面一般是对话框的标题(如果有标题的话)在这个类中如果有标题的话,一般放在类weui-dialog__title 里面;

  在类weui-dialog__bd 里面一般放的是对话框的说明文字或是表单等;
 
  在类weui-dialog__ft里面一般放的是对对话框的操作,例如,“确认”、“取消”等。

  如果在类weui-dialog__ft 里面使用按扭的话,使用的是WeUI提供的两种对话框按扭,一种是文本颜色为灰色,一种是文本颜色为绿色,如上面的示意图中的第二幅图。

  对话框按扭:对话框按扭是由基础类weui-dialog__btn和weui-dialog__btn_default (灰色按扭)或 weui-dialog__btn 和weui-dialog__btn_primary (绿色按扭)构成。