我有几个关于我在网上找到的模态框插件的问题。我的链接代码如下:

<li><a href="#" id="country_link"><span id="label">Country: </span><span id="strong">United Kingdom</span></a> 

这就是我想用来触发模态框打开的方法，但我不知道如何将链接指向模态框，重要的是，如果 javascript 仍然被禁用，它仍然会链接到另一个页。我认为防止默认是我需要的，但我不确定。

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

最佳答案

我将尝试向您解释它是如何工作的。

您需要两个部分。元素，将触发模态框和模态框的元素。

这两部分是用href连接的，你懂的。现在棘手的部分是，href 中的第一个字符必须是“#”。模态框 id 也必须与 href 相同，除了“#”字符。这是代码:

<a href="#my-first-modal-box" id="country_link">
  <span id="label">Country: </span><span id="strong">United Kingdom</span>
</a>

<div id="my-first-modal-box"> This is what appears in modal box </div>

现在是 javascript/jQuery 代码。您将在 href 上简单调用函数:

$(document).ready(function() {

  $("#country_link").leanModal();

});

现在点击链接后，会出现模态框。因为链接以 # 开头，所以它不会调用新页面或页面重新加载 ;)(是的，这是棘手的部分)。另外，我建议您将此模式框直接放在链接下方的 html 代码中。因此，如果关闭了 javascript，那么模态框只是链接下的简单 div，并且始终可见。所以你的 javascript 看起来像这样:

$(document).ready(function() {

  $("#my-first-modal-box").hide(); // this will hide modal box with javascript. 
                                   // It appears only if you click on link and it 
                                   // is visible if javascript is turned off

  // you can add some options, like close buttons
  var myCloseButton = $("<div class=\"close-button\"></div>"); 

  // you append close button only if it is with javascript
  myCloseButton.appendTo("#my-first-modal-box"); 

  $("#country_link").leanModal({ closeButton : myCloseButton });

});

关于javascript - jquery模态框打开链接并可降级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17062719/