这是一款非常实用的jQuery可定制的弹出订阅注册模态窗口插件。注意,该插件在Chrome, Firefox, Safari的桌面浏览器和移动合并上测试通过,在IE浏览器上没有测试。
使用这个模态窗口订阅插件的关键是触发时机。首先,我们使用了3个触发时机,页面加载时、滚动到页面底部、在空闲时弹出。然后我们添加一个弹出延时,以使效果更为平滑,最后,添加一个“自动关闭”功能,当用户回滚页面时,模态窗口会自动关闭。
HTML结构
在div.subscribe-me中的内容将显示在模态窗口中。关闭按钮时可选的。
<body> .. <div class="subscribe-me"> <a href="#close" class="sb-close-btn">x</a> ... </div> .. </body>
当完成了html标记,使用下面的jQuery代码来调用模态窗口插件:
$(".subscribe-me").subscribeBetter({ trigger: "atendpage", animation: "fade", delay: 0, showOnce: true, autoClose: false, scrollableModal: false });
上面的代码将在用户滚动页面到底部时弹出订阅注册模态窗口。
更多参数
在实际应用中,下面有一些可用参数可以使用:
trigger:这个参数可以选择订阅注册模态窗口的触发方式。atendpage将在滚动到页面底部时弹出订阅注册模态窗口。onload将在页面加载时弹出订阅注册模态窗口。onidle将在回滚时弹出订阅注册模态窗口。默认值是atendpage。
animation:该参数可以设置模态窗口的动画类型。可用类型有“fade”, “flyInLeft”, “flyInRight”, “flyInUp” 和 “flyInDown”,默认值为“fade”。
delay:该参数设置弹出模态窗口前的延时时间。单位是毫秒,默认值为0。
showOnce:设置为true,则模态窗口在每个页面只显示一次。设置为false,则在当前页面重复出现模态窗口。默认值为true。
autoClose:该参数设置在页面回滚时是否关闭模态窗口。true为关闭,默认值为false。
scrollableModal:如果你需要在模态窗口中放置一个很长的表单,那么可以设置这个参数为true,给模态窗口一个滚动条。使用autoClose将不再会触发回滚时改变模态窗口。默认值为false。