本组件基于weui.css 及 jQuery。
参考官方样式：WeUI
。
一、CSS部分，主要是动画效果
@import url('https://weui.io/style/weui.css');
/* Half screen Dialog */
.weui-half-screen-dialog {
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.weui-half-screen-dialog_show {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
二、JS部分
// 依赖jQuery
/*
option 对象：
type: 样式1 - 5 ，默认为1
close_btn: 顶部左侧关闭按钮
more_btn：顶部右侧更多操作按钮
header：弹窗头部[必须]
body：弹窗主体内容[必须]
footer：弹窗尾部
*/
$(function(){
$.half_screen_dialog = function(option){
// 先关闭之前可能打开的dialog
$('.js_close').click();
if(!option.header||!option.body) return ;
const type = option.type || 1;
const dialogCss = ['','','weui-half-screen-dialog_bottom-fixed',' weui-half-screen-dialog_large','','weui-half-screen-dialog_slide'];
const html = `
<div class="js_dialog_wrap" role="dialog">
<div aria-label="关闭" role="button" class="js_close weui-mask"></div>
<div class="js_dialog weui-half-screen-dialog ${dialogCss[type]}">
<div class="weui-half-screen-dialog__hd">
${option.close_btn ? '<div class="weui-half-screen-dialog__hd__side">'+option.close_btn+'</div>': ''}
${option.type<5 ? '<div class="weui-half-screen-dialog__hd__main">'+option.header+'</div>' : option.header}
${option.more_btn ? '<div class="weui-half-screen-dialog__hd__side">'+option.more_btn+'</div>': ''}
</div>
<div class="weui-half-screen-dialog__bd">${option.body}</div>
${option.footer ? '<div class="weui-half-screen-dialog__ft">'+option.footer+'</div>' : ''}
</div>
</div>
`;
const $dialogWrap = $(html).appendTo('body').fadeIn(300).trigger('focus');
const $dialog = $dialogWrap.find('.js_dialog').addClass('weui-half-screen-dialog_show');
$dialogWrap.find('.js_close').on('click', function(){
$dialog.removeClass('weui-half-screen-dialog_show');
$dialogWrap.fadeOut(300,function(){
$dialogWrap.remove();
});
});
return $dialogWrap;
};
});
三、使用方式
$(function(){
// 样式一
var $dialog_1 = $.half_screen_dialog({
close_btn:`<button class="js_close weui-btn_icon weui-wa-hotarea">
关闭<i class="weui-icon-close-thin"></i>
</button>`,
header:`<strong class="weui-half-screen-dialog__title">标题</strong>
<span class="weui-half-screen-dialog__subtitle">副标题</span>`,
body:'可放自定义内容',
type:1 // 默认值
});
// 样式二
var $dialog_2 = $.half_screen_dialog({
close_btn:'<button class="js_close weui-btn_icon weui-wa-hotarea">关闭<i class="weui-icon-slide-down"></i></button>',
header:'<strong class="weui-half-screen-dialog__title">标题</strong>',
more_btn:'<button class="weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>',
body: `<div class="weui-bottom-fixed-opr-page">
<div class="weui-bottom-fixed-opr-page__content">
<p class="weui-half-screen-dialog__desc">
辅助描述内容，可根据实际需要安排
</p>
<p class="weui-half-screen-dialog__tips" role="option">
辅助提示内容，可根据实际需要安排
Dolor adipisci quidem consequuntur similique consequuntur doloribus modi possimus sunt voluptas qui Aspernatur natus error quisquam quidem ipsa corrupti! Dignissimos quasi quis natus fugiat odio in? Mollitia molestias error earum.
Dolor adipisci quidem consequuntur similique consequuntur doloribus modi possimus sunt voluptas qui Aspernatur natus error quisquam quidem ipsa corrupti! Dignissimos quasi quis natus fugiat odio in? Mollitia molestias error earum.
</p>
</div>
<div class="weui-bottom-fixed-opr">
<a href="javascript:;" role="button" class="js_close weui-btn weui-btn_primary">同意并完成</a>
<a href="javascript:;" role="button" class="js_close weui-btn weui-btn_default">取消</a>
</div>
</div>`,
type:2
});
// 样式三
var $dialog_3 = $.half_screen_dialog({
header:`<div class="weui-flex" style="align-items: center; font-size: 14px;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 24px; margin-right: 8px; border-radius: 50%; display: block;">
昵称
</div>`,
body:'可放自定义内容',
footer:`<div class="weui-half-screen-dialog__btn-area">
<a href="javascript:" class="js_close weui-btn weui-btn_default">次要操作</a>
<a href="javascript:" class="js_close weui-btn weui-btn_primary">主要操作</a>
</div>
<div class="weui-half-screen-dialog__attachment-area">
<a class="weui-link" href="javacript:;">附加操作</a>
</div>`,
type:3
});
// 样式四
var $dialog_4 = $.half_screen_dialog({
header:`<div class="weui-flex" style="align-items: center; font-size: 14px;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 24px; margin-right: 8px; border-radius: 50%; display: block;">
昵称
</div>`,
body:'可放自定义内容',
footer:`<div class="weui-half-screen-dialog__btn-area">
<a href="javascript:" class="js_close weui-btn weui-btn_default">非主要操作</a>
<a href="javascript:" class="js_close weui-btn weui-btn_primary">主要操作</a>
</div>`,
type:4
});
// 样式五
var $dialog_5 = $.half_screen_dialog({
header:`<div class="weui-half-screen-dialog__slide-icon" style="height: 4px; border-radius: 2px;">
<i class="weui-icon-arrow" style="opacity: 0;"></i>
</div>`,
body:'可放自定义内容',
type:5
});
});
