-1

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

<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);
4

1 に答える 1