I have written some articles before about the use of Boxy pop-up boxes (see jquery.boxy basics ). Today, after solving a need, I thought it was worth recording it, so I will write another article with the main functions. Yes, after the dialog box pops up, it will automatically hide after N seconds, and it will automatically jump!
The effect is as shown in the figure:
The encapsulated code is as follows:
// boxy dialog box extensions
var Boxy_Extensions = {
options: {
title: 'Art Bar Tip',
closeText: 'x'
},
//Hide after N seconds after popping up
alertDelayFun: function (info, timer, options) {
options = $ .extend(this.options, options || {});
new Boxy("
" info "
", $.extend({ behaviors: function () {
setTimeout('$(".boxy-wrapper").hide();', timer);
}
}, options));
},
//After popping up, it will jump automatically
alertHrefFun: function (info, href, options) {
options = $. extend(this.options, options || {});
new Boxy("
" info "
", $.extend({ behaviors: function () {
location.href = href;
}
}, options));
}
}
Because the options attribute is public, it is mentioned, and each method has its own options. If options are passed when calling its own method, pass $.extend It will merge it
with the contents of the options attribute in the class (overwriting the values of the relevant keys and extending the new key values). It seems that writing JS should also follow the object-oriented principle, haha!