オンラインで見つけたモーダル ボックス プラグインに関していくつか質問がありました。私のリンクのコードは次のとおりです。
<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);