关于我在网上找到的模态框插件,我有几个问题。我的链接代码如下:
<li><a href="#" id="country_link"><span id="label">Country: </span><span id="strong">United Kingdom</span></a>
这就是我想用来触发打开模式框的方法,但我不知道如何将链接指向模式框,重要的是,如果 javascript 仍然被禁用,它仍然会链接到另一个页面。我认为 e prevent default 是我需要的,但我不确定。
// Modal Box
// Version 0.1
(function ($) {
$.fn.extend({
leanModal: function (options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null
}
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function () {
var o = options;
$(this).click(function (e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function () {
close_modal(modal_id);
});
$(o.closeButton).click(function () {
close_modal(modal_id);
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$('#lean_overlay').css({
'display': 'block',
opacity: 0
});
$('#lean_overlay').fadeTo(200, o.overlay);
$(modal_id).css({
'display': 'block',
'position': 'fixed',
'opacity': 0,
'z-index': 11000,
'left': 50 + '%',
'margin-left': -(modal_width / 2) + "px",
'top': o.top + "px"
});
$(modal_id).fadeTo(200, 1);
e.preventDefault();
});
});
function close_modal(modal_id) {
$("#lean_overlay").fadeOut(200);
$(modal_id).css({
'display': 'none'
});
}
}
});
})(jQuery);