Dimensions

By default the modal window will auto size for internal urls and will open in the maximum size for external urls.

You can override the width and/or height by setting these to a fixed pixel or percentage value.

500px x 500px
{modal url="sample-articles/my-article" width="500" height="500"}500 x 500px{/modal}
60% x 40%
{modal url="sample-articles/my-article" width="60%" height="40%"}60% x 40%{/modal}

Thanks to the Modals Maximum Width and Maximum Height features (set to 95% by default), every modal window created by Modals will be responsive: if the browser window is smaller or gets resized to dimensions smaller than the ones of the modal window, the modal window will adapt to not exceed the size of the container.

Positioning PRO

The Pro version of Modals allows you to control the modal's vertical and horizontal positioning instead of the default position of being centered in the viewport.

You can adjust the default behavior via the Modals plugin settings, or individually determine the positioning of each modal tag by using the top, bottom, left, and right attributes. You can also choose to disable the overlay of the modal to make the underlying text still fully visible and accessible.

For example, to position the modal popup in the lower-right corner of the page with a margin of 20px, and with no overlay covering the underlying content:

Modal positioned on bottom right
{modal url="images/fruit/bananas.jpg" bottom="20" right="20" overlay="false"}Modal positioned on bottom right{/modal}

To display the modal in a fixed position within the visitor's viewport (unlike the default absolute positioning relative to the document) you can achieve so by adding a fixed="true" attribute.