You are here: Reference > Rule types > Skins > Skin form - General - Modal dialogs - Modal Dialogs window

  Skin form — Components tab — General — Modal dialogs

  
  1. Header 
  2. Body 
  3. Modal Dialog window  

Styles set here apply to the border and window size of modal dialogs. The implementation and CSS classes for modal formats differs, depending upon whether your application is rendered in HTML5 document type - standards mode or in quirks mode. See Displaying a modal dialog in a custom format created in the skin on the PDN.

Modal Dialog Styles

A preview of the currently selected format displays to the right. You can also preview formats by selecting Actions > Launch in the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview. In the Skin Preview, select the Controls tab and click Open Modal.

Border

Use mixin

Select to use a mixin to define the appearance of this element. The Mixin field displays the name and a preview of the currently selected mixin. Click the gear icon to select a different mixin from the list.

If desired, you can specify the Top, Left, Right, or Bottom border as none, solid, dashed, or dotted , rather than inheriting the style from the selected mixin.
Specify styles

Select to define a custom border:

  • same for all sides — clear this check box if you want to specify a different border style for Top, Left, Right, and Bottom.
  • Select a border type and specify the pixel width and color of the border:
    none, solid, dashed, or dotted.

Rounded corners

Depending upon whether your application is rendered in quirks or standards mode (HTML5 document type), rounded corners are implemented differently. Applications built in Pega 7 Platform automatically render in the HTML5 document type. This ensures cross-browser and cross-platform compatibility and use of the latest HTML markup. To enable HTML5 document type for pre-Pega 7 Platform applications, see HTML5 Application Readiness.

If your application is rendered using:

 
enable rounded corners (HTML5 only)

Select this check box if you want the modal dialog border to have rounded corners. You can select this option when using a Style mixin or a custom border.
same for all corners Select to use the rounded corner settings that you specify in the Unit and Radius fields for all four corners or clear to specify the length of the x and y axis for the Top Left, Top Right, Bottom Left, and Bottom Right.
same x and y axis radii

Select to specify x and y radii of the same length. If you clear this check box, specify the length of the x and y axis for the Top Left, Top Right, Bottom Left, and Bottom Right.
Unit Select to define the unit of measurement for the rounded corner settings: pixels (px), percentage (%), or em (the current font size).
Radius

Define the curve of rounded corners by specifying the x (hortizontal) and y (vertical) radii of the quarter ellipse that makes the rounded corner of the modal dialog. Displays when same for all corners is selected.

Window size

Specifies the window size of the modal dialog. If your application is rendered in HTML5 document type – standards mode, modal dialogs honor the design time width of the layout, while, in quirks mode, modal dialogs shrink to the minimum width and height possible, regardless of the settings specified here.

min-height

Accept the default, auto, in which the modal dialog is automatically sized or select custom to specify the minimum height of the modal dialog in pixels (px) or percentage (%).
min-width Accept the default, auto, in which the modal dialog is automatically sized or select custom to specify the minimum width of the modal dialog in pixels (px) or percentage (%).

 

Definitions modal dialogs
Related topics Skin rules — Completing the Components tab

About Skin rules

Open topic with navigation