Jquery模式框打开链接并可降解

Jquery modal box to open a link and be degradable

本文关键字：链接 模式 Jquery      更新时间：2023-09-26

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

<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中的第一个字符必须是"#"。此外，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();
});

现在点击链接后，将出现模态框。因为link以#开头，它不会调用new page或page reload;)(是的，这是一个棘手的部分)。我也建议你把这个模态框在你的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 });
});
相关文章：