【摘要】本文主要介绍使用公司弹框插件过程中的一些总结，如果大家有什么建议，欢迎随时补充。
【作者】明月。
本文分为两部分：
第一部分：弹框插件的使用
第二部分：某B2C系统项目（以下简称项目）开发过程中遇到问题的总结
具体内容如下：
第一部分：弹框插件的使用：
为了方便使用，中心管理系统弹框的调用函数写在公共js文件中,页面调用时需要在HTML页面引入公共js文件及弹框插件依赖的相关插件：
1. HTML代码（需要引入的插件）：
<script type="text/javascript" src="res/js/common/fx.common.js"></script>
<script type="text/javascript" src="res/js/common/ui/fx.waiting.js"></script>
<script type="text/javascript" src="res/js/common/ui/fx.status.js"></script>
<script type="text/javascript" src="res/js/common/ui/fx.drag.js"></script>
<script type="text/javascript" src="res/js/common/ui/fx.scroll.js"></script>
<script type="text/javascript" src="res/js/common/ui/fx.dialog.js"></script>
2. JS代码：
M.tool.dialog({
//引入dialog插件相关参数，参数参考下图，以下列出常用的一些参数
url:,//Ajax请求地址（弹框的静态编码）
title:,//标题,支持html标签
single:,//1.false弹框包含【提交】和【取消】两个按钮，2.true弹框包含【关闭】一个按钮
render:{
enabled:,//是否需要先渲染弹出框数据
data:,//渲染数据对象（弹框静态页面用以下形式表示：{{渲染值的key值}}）
},
callback:function(self){},//初始化完成回调
cancel:function(self){},//点击取消按钮回调，当single为false时使用
sure:function(self){},//点击确认按钮回调，当single为false时使用
close:function(self){}//点击关闭按钮回调，当single为true时使用
})
3. 以下是dialog插件其他参数补充
图1：弹框相关参数
第二部分：某B2C系统项目（以下简称项目）开发过程中遇到问题的总结
1. 问题描述
公司PC商城项目基于我们的中心管理系统编码方式进行开发，可以发现，在中心管理系统开发过程中，弹框的风格样式基本一致，不同项目对弹框样式进行调整，可以修改base.css中弹框样式代码。
上面提到的方式可以用于整个项目仅有一种风格样式弹框的项目中，如公司开发的某大型采购B2B系统，但是某B2C项目项目开发过程中，弹框存在多种风格，处理的方式是不同风格的弹框添加一个不同的类，然后各自定义样式：
图2：某大型采购B2B系统弹框示意图（风格一致）
图3：某B2C系统项目弹框示意图（风格差别较大）
2.解决方式：
第一步：在js文件和弹框插件中增加一个type参数，默认为零：
图4：在js文件中多加上一个类别的参数
图5：在插件中多加上一个类别的参数
第二步：在插件文件中找到渲染弹框内容的函数，控制class的命名，弹框的原始命名统一为mt-master-content，我们可以根据实际给与其他的命名：
图6：弹框内容动态渲染（原本的类名为mt-master-content）
图7：弹框内容动态渲染（可以换成别的类名）
第三步：根据不同类名定义弹框的样式来实现不同风格的弹框。
