你永远也想不到bug会在什么时候出来咬你一口
在使用Foundation框架的时候,突然遇到了一个现象:当使用多个button调用同一个id的reveal对话框时,对话框closed后会自动将页面调整到最后一个指向此id的button位置。
在这种情况下,长页面布局在调用对话框后,用户体验性就很差了。
框架不是用来制约人的,因此,遇到的bug总有解决的那一天。
给button加上点击事件:
function addToggle(elements){
$(elements).attr("data-toggle","yourRevealId");//添加属性
}
调用对话框时:
$("#items-details").on("closeme.zf.reveal",function () {
console.log("关闭弹窗");
//去除所有的data-toggle="yourRevealId"
$("button").each(function () {
if ($(this).attr("data-toggle")=="items-details"){
$(this).removeAttr("data-toggle");
}
})
});
这样,我们可以保证每次打开reveal时,页面上只有一个相应的data-toggle属性。因此,reveal关闭后,页面不会随意滚动了。