私はモーダルプラグインを書いています。現在、モーダルはページの中央に配置され、表示サイズが変更されると調整されます。
リンクがクリックされて非表示のコンテンツが表示されるなど、モデル内で何らかのアクションが発生した場合は、同じ調整を行いたいと思います。
これが私が今持っているものです:
// 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、ウィンドウ、ドキュメント);