Modal Windows and Sliders Overview

Some tiles within LiveTiles are designed to be responsive to user interaction. Many tiles display content by retrieving the data from different sources such as SharePoint and other Office 365 apps and 3rd party resources. ex. Salesforce, Facebook, Google etc.
Modal Windows and Sliders are two styles to open source information without having to leave the page. A modal dialog is a smaller window that opens within a page so that the user can interact without leaving the parent application. 

A great example of this use case would be our New News Tile. The New News Tile displays a preview of content in either as a list or a carousel. When an item in the tile is clicked, a Modal Dialog window or Slide out appears and displays the full content, as seen below.

Style and Behavior Settings

In most cases, tiles that contain the Modal Windows and Sliders feature would have their options within the Links Tab. It is within this tab that users can configure the style and behavior of their Modal Dialog Window or Slider. Within the Links Tab, you will see options to configure features of the Modal Windows and Sliders. 

What are my options?

Within the Links Tab, users can select from four different Click Target options. Depending on the selected Click Target option, there will be separate styling choices. This following discusses display options that keep you in your current LiveTiles page, the Modal Dialogue and Slide 

Modal Dialog

After selecting the Modal Dialog option for the Click Target, you can configure the Modal Width, the Modal Height, and the Modal Style

Modal Style has three display options for the modal window 

Frameless - the modal dialog will display the content with title header and body

Framed - the modal dialog will display a border around the content with title header and body

SharePoint - displays the link in a standard SharePoint modal window

Note: if an external website you are linking to is not responsive (adapts to screen size changes), these frames will not work, as these windows do not scale

Slide

After selecting the Slide option for the Click Target, you can configure the Slide Position and Slide Width

Best Practice Tip- Aside from style preference, remember to consider the rest of the page's function and behavior before choosing a slide out option and position
Best Practice Tip- increase the width of the slide window for larger/lengthier content for easier readability. 

Restrictions and more Best Practices

To use a modal window or a slider, for an external site, you will need to include https:// in front of the site link. In addition you will need to make sure that the site link, is able to be put into an iframe.
As modal windows and sliders both use iframes, if a page does not have this option, it will not work.