1

我正在写一个模态插件。目前，模式将在页面中间居中，并在显示尺寸发生变化时进行调整。

如果模型中发生某些操作，例如单击链接并显示隐藏内容，我想进行相同的调整。

这是我现在拥有的：

// load modal
boxPos(el);

// adjust position and dimentions of the modal
$(window).resize(function() {
    boxPos(el);
});

我应该只听“click”事件还是有办法检测 show()/hide()？但话又说回来，可能会有 slideDown 等。我将如何实现它？

更新 - - - - - - - - - - -

好的，部分成功...我在底部添加了一个函数来响应单击链接、div 跨度或输入元素。我调用了 re-size 函数，但在调整窗口大小之前。也许我可以延迟重新调整大小以及重新调整大小时的一些滑动动作？或不...

这是整个模态代码：

;(function ($, window, document) {

// window and document are passed through as local variable rather than global
// as this (slightly) quickens the resolution process and can be more efficiently
// minified (especially when both are regularly referenced in your plugin).

function boxPos(el) {

    // calculate/set height of content area         
    var winH = $(window).height(),                          // viewport height
        winW = $(window).width(),                           // viewport width
        ttlH = $('#bmcTitle').outerHeight(true),            // modal title element height
        auxH = $('#bmcAux').outerHeight(true),              // auxiliary area element height
        ftrH = $('#bmcFooter').outerHeight(true),           // modal footer element height
        cntH = winH - ttlH - auxH - ftrH - 150;             // calculated content area height 

    $('#bmcContent').css('max-height', cntH+'px');

    // position modal in center
    var boxH = $('#bmc').outerHeight(true),                 // real modal height
        bmcH = ttlH + auxH + cntH + ftrH + 80,              // modal height plus content padding/margin  
        bmcW = $('#bmc').outerWidth(true),                  // real modal width 
        bmcT = (winH - (boxH < bmcH ? boxH : bmcH)) / 2,    // top offset for centering         
        bmcL = (winW - bmcW) / 2;                           // left offset for centering 

    $('#bmc').css({ 'top': bmcT+'px', 'left': bmcL+'px' });
}

$.fn.bmc = function() { 

    // REQUIRED -- modal title
    var el = $(this),
        boxHeader = el.attr('title'),                       // modal title          
        boxContnt = el.find('#bmcMid').show().html(),       // content area will overflow if content exceeds max space          
        overlay   = $('<div />').css('opacity','.8').addClass('bmcOverlay');

    // check if form is present
    if (el.find('form').length > 0) {
        var boxForm      = el.find('form').clone().empty(),
            boxFormTags  = boxForm[0].outerHTML,
            boxFormOpen  = boxFormTags.split("</")[0];  
            boxFormClose = '</form>';
    } else {
        var boxFormOpen  = '',
            boxFormClose = '';
    }

    // OPTIONAL -- reserved spot for anything static on top of modal box, like errors, or description.
    if (el.find('#bmcTop').length > 0) {
        var boxAuxilr = (el.find('#bmcTop').html() == '' ? '' : '<div id="bmcAux">'+el.find('#bmcTop').html()+'</div>');            
    } else {
        var boxAuxilr = '';
    }

    // OPTIONAL -- static area at the bottom of modal. Put buttons here.
    if (el.find('#bmcBtm').length > 0) {
        var boxFooter = (el.find('#bmcBtm').html() == '' ? '' : '<div id="bmcFooter">'+el.find('#bmcBtm').html()+'</div>');
    } else {
        var boxFooter = '';     
    }

    // assemble modal box
    var modalBx = $('<div id="bmc"><div id="bmcClose"></div><div id="bmcTitle">'+ boxHeader +'</div>'+ boxAuxilr + boxFormOpen +'<div id="bmcContent">'+ boxContnt +'</div>'+ boxFooter + boxFormClose +'</div>');  

    $('body').append(overlay, modalBx).hide().fadeIn(500);

    // load modal
    boxPos(el);

    // adjust position and dimentions of the modal
    $(window).resize(function() {
        boxPos(el);
    });

    $('a, div, span, input').children().on('click', function() {
        boxPos(el);
    });

    // close and remove modal
    $('#bmcClose, .bmcClose').on('click', function() {
        modalBx.remove();
        overlay.remove();
    });

    return;
};

})(jQuery, 窗口, 文档);

4

0 回答 0