Default

The modal is built upon Bootstraps modal functionality but we have overridden the default placement and transition of the modal.

On slow connections the modal will display a loading state (an animated svg) whilst the content is being fetched. 

The placement of the modal works in conjunction with flexbox so it is always within the centre of the veiwport without being positioned absolutely.

The content editor currently has to manually add the data-toggle="modal" HTML to define the link to open in a modal. We hope to fix this issue within the next release. 

Modal trigger

Video

The Video popout grid property responsively displays videos with the aspect ratio of 16:9 (1080 HD) within a modal.

This grid property injects a video-embed class to the modal which is used to override the default styles applied.

It's recommended that the exit button for the modal houses a solid background so it overlays any share or like buttons that are applied to the video. Otherwise it looks unprofessional.

System.NullReferenceException: Object reference not set to an instance of an object. at ASP._Page_views_partials_grid_editors_VideoPopout_cshtml.Execute() in d:\home\site\wwwroot\Views\Partials\Grid\Editors\VideoPopout.cshtml:line 13