1

私はモーダルプラグインを書いています。現在、モーダルはページの中央に配置され、表示サイズが変更されると調整されます。

リンクがクリックされて非表示のコンテンツが表示されるなど、モデル内で何らかのアクションが発生した場合は、同じ調整を行いたいと思います。

これが私が今持っているものです:

// load modal
boxPos(el);

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

「クリック」イベントを聞くだけですか、それとも show()/hide() を検出する方法はありますか? しかし、もう一度、slideDown などが存在する可能性があります。どのように実装しますか?

アップデート - - - - - - - - - - -

OK、部分的な成功です... リンク、div スパン、または入力要素のクリックに反応する関数を下部に追加しました。サイズ変更関数を呼び出しますが、ウィンドウのサイズが変更される前です。おそらく、そのサイズ変更と、サイズ変更時のスライド アクションを遅らせることができますか? か否か...

モーダルコード全体は次のとおりです。

;(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