Popup

• Shows popup based on popup type.

Features/Functionality

• It can be normal alert box, confirm box, or popup with given data.
• It wil return promise.
• Component is responsive.
• It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependencies

• jquery
• font-awesome
• shared styles
• shared scripts

HTML Structure

<require from="{user_path}/popup_elms/popup_elm"></require>

<cst-popup popup-mdl.bind="{popupMdl}"></cst-popup>

Bindable Properties

Property Name	Data Type	Required	Decription	Example
popupMdl	object	Yes	Object to set popup instance	pupopMdl = {/}

Structure of bindable properties

pupopMdl structure

pupopMdl = {

instance:{}

}

Methods that can be called to show popup

1. alert(message,options)
2. confirm(message,options)
3. popup(data, options, type)

Method parameters

• message: Message to be displayed.
• data: Data to be passed to component. Following is the structure:
  data: {

  header: {

  label: '',

  showClose: ''

  },

  body: [], // Html or content

  footer: {

  buttons: [

  {

  id: '',

  label: '',

  isCancel: ''

  }

  ]

  }

  }
• options: Options to be passed to component. Following is the structure:
  options: {

  closeOnOuterClick: false,

  pageLabel: {},

  pageColorData: {}

  }
• type: Type of popup to be shown. Type can be any of the following:
  • alert
  • confirm
  • popup(Default)

CSS Overrinding

• Following classes are given to override CSS:
  • .cst-popup-dialog-box-container-override : Container Class

Note

• While giving the classes in page, give them in nested structure.

Rules

Component measurements

** box-sizing: border-box is used. So width and height will be dimensions + padding.

Working Example

HTML

<template>

<require from="./shared/custom_comp/popup_elms/popup_elm"></require>

<div>

<cst-popup popup-mdl.bind="popupMdl"></cst-popup>

</div>

</template>

JS

class MyCls{

constructor(){

this.popupMdl = {};

}

}

export { MyCls }

Example Screen Shots

Desktop

---

IE Desktop

---

Tab

---

Mobile

---

Demo Link
Demo

---

Mark down usage
https://guides.github.com/features/mastering-markdown/

Version	Date	Developed By	Information Classification	Reviewed By	Approved By
1.0	18-10-2019	Tarun	INTERNAL		Prasan