Single Page

Popup

Popup is made by 3*3 grid style.

Note:

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-popup

Supported

V

CSS Specification:

Class Name

Description

Default Values

.z-popup

Font size

position: absolute; top: 0; left: 0; visibility: hidden; z-index: 88000; border: 0 none; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;

.z-popup .z-popup-tm

Background of top middle

background: transparent url(${c:encodeURL('~./zul/img/popup/pp-tb.png')}) repeat-x 0 0; overflow: hidden; zoom: 1; font-size: 0; line-height: 0; height: 8px;

.z-popup .z-popup-tl

Background of top left

background: transparent url(${c:encodeURL('~./zul/img/popup/pp-corners.png')}) no-repeat 0 0; padding-left: 8px; overflow: hidden; zoom: 1;

.z-popup .z-popup-tr

Background of top right

background:transparent url(${c:encodeURL('~./zul/img/popup/pp-corners.png')}) no-repeat right -8px; overflow: hidden; zoom: 1; padding-right: 8px;

.z-popup .z-popup-cm

Background of center middle

background: #E5F3FB url(${c:encodeURL('~./zul/img/popup/pp-tb.png')}) repeat-x 0 -16px; padding:4px 10px; overflow: hidden; zoom: 1;

.z-popup .z-popup-cl

Background of center left

background: transparent url(${c:encodeURL('~./zul/img/popup/pp-l.png')}) repeat-y 0; padding-left: 4px; overflow: hidden; zoom: 1;

.z-popup .z-popup-cr

Background of center right

background: transparent url(${c:encodeURL('~./zul/img/popup/pp-r.png')}) repeat-y right; padding-right: 4px; overflow: hidden; zoom: 1;

.z-popup .z-popup-bm

Background of bottom middle

background: transparent url(${c:encodeURL('~./zul/img/popup/pp-tb.png')}) repeat-x 0 -8px; height: 8px; overflow: hidden; zoom: 1;

.z-popup .z-popup-bl

Background of bottom left

background: transparent url(${c:encodeURL('~./zul/img/popup/pp-corners.png')}) no-repeat 0 -16px; zoom: 1; padding-left: 8px;

.z-popup .z-popup-br

Background of bottom right

background: transparent url(${c:encodeURL('~./zul/img/popup/pp-corners.png')}) no-repeat right -24px; zoom:1; padding-right: 8px;

.z-popup .z-popup-cnt

Color

margin: 0 !important; line-height: 14px; color: #444; padding: 0;