1

CSSでSimpleModalを画面サイズの80％に設定しています。

#simplemodal-container {
    background-color: white;
    border: 4px solid #aaaaaa;
    padding: 12px;
    height: 80%;
    width: 80%;
}

ユーザーがウィンドウのサイズを変更したときに、SimpoleModelのサイズをウィンドウサイズに合わせて変更したいと思います。

ただし、これは機能しません。

   $(function () {
        $('#agreement-modal-content').modal(
            {
                autoResize: true,
            }
        );
    });
4

1 に答える 1

2

これが私のために働いた解決策です：

  $(function() {
        $('#agreement-modal-content').modal(
            {
                autoResize: false,
                onShow: function(dialog) {
                    var h = $(window).height();
                    var w = $(window).width();
                    dialog.container.css('height', '80%');
                    dialog.container.css('width', '80%');
                    var h2 = dialog.container.height();
                    var w2 = dialog.container.width();
                    var top = (h / 2) - (h2 / 2) - h2;
                    var left = (w / 2) - (w2 / 2) - w2;

                    if (top < 60) {
                        top = 60;
                    }

                    if (left < 60) {
                        left = 60;
                    }

                   dialog.container.css('left', left + 'px');
                   dialog.container.css('top', top + 'px');

                }
            }
        );
      }
    );
于 2013-03-06T00:27:40.293 に答える