jquery - jQuery：SimpleModal 自动调整为窗口大小

Question

我在 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,
            }
        );
    });

Answer 1

这是对我有用的解决方案：

  $(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');

                }
            }
        );
      }
    );