-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

1

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

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

正如您所理解的，这两个部分与 href 连接。现在棘手的部分是，href 中的第一个字符必须是“#”。modalbox 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 });

});
于 2013-06-12T11:20:32.513 回答