CODEWITHSUNDEEP
jqueryjquery-uisimplemodal
Ian Vink
Ian Vink

Reputation: 68740

jQuery: SimpleModal Autoresize to window size

I have a SimpleModal set to 80% of the screen size in the CSS:

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

I want the SimpoleModel to resize with the Window size as the user changes the size of the window.

This doesn't work though:

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

Upvotes: 1

Views: 1466

Answers (1)

Ian Vink
Ian Vink

Reputation: 68740

Here's the solution that worked for me:

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

                }
            }
        );
      }
    );

Upvotes: 2

Related Questions