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.

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

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

Every modal window created by Modals will be responsive, meaning that 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 positioning of the modal. By default the modal is 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 position attribute.

Valid position values are: 

• top-left
• top
• top-right
• left
• center
• right
• bottom-left
• bottom
• bottom-right

If you just want the modal part to show, without any background overlay, close button, navigation arrows, etc, then you can add the special just-the-modal class to the modal:

{modal url="images/fruit/bananas.jpg" classname="just-the-modal" width="400" position="bottom-right"}Modal positioned on bottom right{/modal}

When a modal is open, Modals will disable the scrolling of the website in the background by default.
If you want to re-enable the website scrolling, add a enable-page-scrolling="true" attribute to the modal too:

{modal url="images/fruit/bananas.jpg" enable-page-scrolling="true" classname="just-the-modal" width="400" position="bottom-right"}Modal positioned on bottom right{/modal}