《小白HTML5成长之路32》把自定义弹窗做成控件的第一步

“小白，今天上午布局的那个弹窗想法不错！”

小白说道：“我只是用CSS布了一个局，还没有添加用户交互呢！”

老朱说：“不着急，像这种常用的功能你可以尝试把它做成控件，这样以后就能经常使用了，从现在开始我们用几天的时间了解一下，怎么做一个能够经常调用的控件吧！”

“恩，这样确实不错，虽然做的时候麻烦点，但是以后使用起来就会很方便了！我应该做点什么准备工作呢？”

老朱跟小白说：“一个控件包含CSS和JS两个部分，你可以建一个文件夹，把你做的控件的JavaScript文件和CSS文件放进去，使用的时候在当前页面中引入对应的js文件和CSS文件就可以了。”

小白虽然不怎么明白，还是建了一个名称为以小白首字母xb命名的文件夹，然后在里面放了两个空的CSS和JS文件。

建好以后小白问老朱：“下面该注意什么呢？”

老朱说：“小白！你上午做的那个布局基本可以满足一些普通网站的用户提示，有几个问题我们需要处理一下。首先是id的问题，你做的控件里面应该尽量避免id字段，因为控件加载到网页中后它很有可能跟网页中其他的id字段发生冲突，所以我们把它改成通过class控制样式。class名称为了跟其他人有所区别，我们使用：‘控件集名称-控件类别-控件容器标识’这样的模式起名，这样我们就能很容易通过class分辨它控制的哪里的样式，当然通过这种方式也基本可以保证不跟别的控件的class名称冲突。”

“哦！我试着改一改，稍等我一会儿！”

“是这个样子么？我已经把所有的容器通过class进行CSS样式控制了。”

“好了，现在你把所有关于弹窗的css样式都放到刚刚建的那个css文件里面，然后在head里面引入这个css文件。”

“放好了，然后呢？”

“你定义一个对象，让这个对象可以把你布局的那段html代码放到body里面。不用做的太复杂，简单点，有一个记录html代码的变量和一个往body放html代码的方法就可以了。”

“做好了，是不是这样？我通过Layer调用alert方法就可以把之前的html布局放到body里面。”

“恩，对！你现在把Layer对象放到之前创建的js文件里面，然后把那个js文件也引入到页面中。”

“好了，现在页面的功能跟我之前布局实现的功能是一样的！都是打开页面以后出现弹窗，我试着改成点击图片出现弹窗吧！”

“朱哥，你看下效果！”

“恩，不错，我们现在把弹窗控件所需要的基本元素已经搭建好了，弹窗对象也有了，后面我们需要实现这个弹窗的接口功能，比如设置弹窗的标题、显示内容、关闭弹窗、点击确定以后触发的事件等等，我们一步一步的来制作这个控件。别看一个小小的弹窗，它包含了很多javaScript对象处理的知识，通过制作这个简单的弹窗控件你可能会对javaScript对象有更深的了解。”

---

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！