dialog.js弹窗插件

5,949 阅读1分钟

从一开始使用alert来提示,到后来的jQuery手动写弹窗,再到后来使用layer弹窗插件来完成,到现在使用dialog插件来完成弹窗,一步步的摸索,一步步的收获。

现在在项目中大部分的弹窗都是使用dialog完成,尤其是dialog搭配上template的时候,真的是好用~

首先,附上效果图:



引入ui-dialog.css以及dialog.js后,就可以在需要的地方写上dialog({})来表示你的弹窗了,千万别漏了后面的.showModal()哦


看了代码也就知道dialog的基本用法了,title表示弹窗的标题,content表示弹窗的内容,本例子使用了template来载入弹窗的内容,template的代码就不展示了,如果是删除弹窗的话,content的内容可直接写为“是否确定删除该条目?”;okValue表示确定按钮中的内容;cancelValue表示取消按钮中的内容,ok中可写一个函数,函数中的内容即为点击完“确定”按钮后要执行的函数。

有的时候,一个项目中会需要用到两种不同样式的弹窗,比如这种:


这种情况使用dialog也是非常方便的,代码如下:



只需要单独在common文件中写一个deleteCss函数,然后哪里需要就在哪里调用,妈妈再也不担心我一个项目要用两种不一样的弹窗样式啦~