Panel Popup Hello

Overview

Widgets Popup Panel is an interactive hide/show panel that takes over most of the currrent viewport to gain the full attention of the user.

It can be useful in education and academic digital content. It is useful for structured content such as notes, footnotes, glossary definitions and indexes, but can also be used for supplementary content. In AIE Widgets Popup Panels are authored containers that are hidden until required. You can include any content into a pop-up and style it appropriately for the content.

The popup panel is designed to take over most of the viewport when launched. It is a "may I have your complete attention" tool. The popup panel can contain any content including interactivity, rich media animations and even 3D objects.

Popups can be launched from text, headings, titles and icons.

Pop-ups size to the system window. If you are targeting generic viewport aspect ratios you must have an elastic design in your pop-up panel that is tested for 4:3, 16:10 and 16:9.

Sample Panel Popup

You can see the Popup panel by clicking Hello in the title of this page or check it out by clicking here to see Panel Popup in action.

Production and Design

Popup Panel comes with default size of 80% X 80%. The default size can be customized according to the requirement of the project and design of the book.

Inserting a PopUp Panel in IGP:Digital Publisher

To insert Widgets Panel PopUp into an IGP:Writer document.

1. In the editing panel, place your cursor at the required insertion point in an empty paragraph.
2. From the Content Blocks accordion select> W01: Widgets
3. Double click on "07 Panel PopUp" block.
4. The PopUp Text content block will be inserted into the text with placeholder text.
5. You can now directly write, copy/paste or assemble your content inside the Panel PopUp block.

By default Panel PopUp block will be hidden in the output format. This block is invoked and displayed by internal ID references. It can be called from anywhere and from multiple places within the section.

Creating a PopUp Panel Call Reference

1. To create a Panel PopUp call reference select the text/content from where you want any particular popup text block to be called or opened.
2. From the Content Block accordions, INLINE styles, click on the "Panel Popup Reference" selector.
3. The selected text will have the Panel PopUp reference tag applied and will turn blue.
4. The ID-Reference must point to the ID of the PopUp Panel. The PopUp Panel ID must be unique in the section.
5. Get the ID of the Panel PopUp block from the Content Block Tool (click on ID and copy the ID).
6. Click on the Popup Reference text. It will open a dialog so you can enter the Panel PopUp block reference ID.
7. Paste the correct Panel PopUp block ID you just copied and click on OK button.
8. Save the Writer document and view the section in the Reader panel.
9. When you click on the Panel PopUp reference text the Panel PopUp block will open.

Editing the Placeholder Content

We have kept presentation design as simple as possible. Because it can be customized anytime as needed. The presentation and size of Panel can be customized at any time.

To change the size of the panel (or any other styling),

1. Open the CSS Editor
2. navigate to A03 WIDGETS and
3. change width: 80%; and height: 80%; from below three selectors to the size of your choice or need.
4. Reset of the presentation design work can be carried out if needed.

Example PopUp Panel

The PopUp Content Block content in thi article is placed between the following   dotted lines, which is hidden in a normal view.

=======================

I am a Panel PopUp Content Block

Hi!. I am a Panel Popup block being called by my dearest referrers. We are inextricably linked by IDs.

By default I take over 90% of the viewport area to make sure that user is fully paying attention to me only. I have been set as position fixed at 90vw and 90vh  and top and left postions at 5vh and 5vw to position me nicely in the center of the viewport.

My dimensions are set using the VH, VW VMIN and VMAX CSS properties. That means this text resizes as the screen resizes.

VW In this paragraph the text is 2% of the viewport width.

VH In this paragraph the text is 2% of the viewport height.

VMIN In this paragraph the text is 2% of the minimum viewport dimension.

VMAX In this paragraph the text is 2% of the maximum viewport dimension.

LET'S WAVE THE FLAG OF NEPAL

 ======================

 Tagging Pattern and CSS

PopUp Panel Tagging Pattern

<!-- POPUP PANEL -->
<div class="widgets-rw panel-popup-rw">
<h4>I am a Panel PopUp Content Block</h4>
<p>Your content goes here. You can insert any content including:
   Text, images, audio and video.</p>
</div>
<!-- POPUP PANEL REFERENCE LINK -->
<span class="ref-panel-popup-rw" data-pp-target="pp1">Hello</span>

 Note that Widget references use the HTML5 data- attribute.

PopUp Panel Default CSS

/*DEFAULT POPUP PANEL CSS =============== */
div.panel-popup-rw {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10% !important;
    left: 10% !important;
    display: none;
    overflow: auto;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    color: rgb(0, 0, 0);
    box-shadow: 5px 5px 10px black;
    border-radius: 10px;
    background-color: rgba(220, 220, 200, 1);
    background: -moz-linear-gradient(top,  rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%);
    background: linear-gradient(to bottom,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%);
    z-index: 99999999999999;
    margin: 0; 
    padding: 10px;
    }
/*DEFAULT POPUP PANEL REFERENCE CSS =============== */
.ref-panel-popup-rw {
    color: blue;
    text-decoration: none;
    cursor: pointer;
    }
.ref-panel-popup-rw:hover {
    text-decoration: underline;
    }