YFE-BP 前端最佳实践

模态框

模态框几乎是除了按钮之外，最容易被使用到的组件了。

以下代码均可实时编辑，实时更新。

Dom 结构

        <div class="dialog-wrap">
            <a href="javascript:;" title="遮罩" class="mask"></a>        
            <div class="dialog">
                <a href="javascript:;" title="关闭" class="dialog-mask">&times;</a>      
                <div class="dialog-hd">
                    <h3 class="dialog-title">模态框示例</h3>       
                </div>
                <div class="dialog-bd">
                    模态框内容
                </div>
                <div class="dialog-ft">
                    模态框底部（一般为操作区）
                </div>
            </div>
        </div>
    

关闭按钮 [.dialog-close]

因为HTML 字符 × 默认就是一个叉的形状，所以这边用这个来降级。当然也可以通过字体，图片，svg 或者直接 css 绘制。

主体

半透明的遮罩，可以直接通过设置 .dialog-wrap 元素的背景颜色实现，但这边我们推荐单独用一个 .dialog-mask 元素去实现。

1. 这样在不需要半透明遮罩，不输出 .dialog-mask 这个元素即可;
2. 需要点击遮罩关闭弹窗的时候，只需要在 .dialog-mask 元素上绑定事件;

显示隐藏 JS

通常我们默认弹窗不显示。

然后通过 JS 去给 .dialog-wrap 添加一个标志位的 class 来控制弹窗的显示。

在我们规范里，我们推荐使用 ._on 来作为这个标志位 class。

布局方式