Socket
Socket
Sign inDemoInstall

modal-box

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

modal-box

Small utility lib to display a modal box


Version published
Weekly downloads
4.1K
decreased by-3.52%
Maintainers
1
Weekly downloads
 
Created
Source

Modal box Build Status

A simple utility to display modal box

Installation

npm --save modal-box

Include the downloaded script in your page.

Initialization

See example.html for some examples

// Content can be any HTMLElement, like an iframe for example.
var content = document.createElement('iframe');
content.src = [....];
content.style.width = '1000px';
content.style.height = '800px';

// Open the modal box with the given content
Coveo.ModalBox.open(content);

// Close all open modal box
Coveo.ModalBox.close();

ModalBox options

// When you create a modal box, you can pass additional options
var content = createSomeContent();

var modalBox = Coveo.ModalBox.open(content, {
    title : 'This is a title',
    overlayClose : true
});

fullScreen

Type : Boolean Specify if you wish to open the modal box full screen. Default is false. If false, the modal box will fit the size of the content.

titleClose

Type : Boolean Specify that you wish the modal box to close when the user click on the title. Default is false.

overlayClose

Type : Boolean Specify if you wish to close the modal box when the overlay (black background) is clicked. Default is false.

className

Type : string Specify that you wish to add a prefix to the class name of the modal box container, to not clash with existing css in the page

button

Type : number Specify the button you wish to create for the modal box.

Possible buttons :

  • Coveo.ModalBox.BUTTON.OK
  • Coveo.ModalBox.BUTTON.APPLY
  • Coveo.ModalBox.BUTTON.YES
  • Coveo.ModalBox.BUTTON.NO
  • Coveo.ModalBox.BUTTON.CANCEL

Can use multiple button like so :

var modalBox = Coveo.ModalBox.open(content, {
    buttons: Coveo.ModalBox.BUTTON.OK | Coveo.ModalBox.BUTTON.APPLY | Coveo.ModalBox.BUTTON.CANCEL
});

ModalBox object

When you create a modal box, you receive a modal box object

var content = createSomeContent();

var modalBox = Coveo.ModalBox.open(content);

modalBox

Type : HTMLElement

The whole modal box HTMLElement (the top most container);

overlay

Type : HTMLElement

The clickable overlay, which can close the modal box if needed.

wrapper

Type : HTMLElement

The wrapper around the the content given to create the modal box

buttons

Type : HTMLElement

The wrapper that contains all the given button to create the modal box

content

Type : HTMLElement

The content that was given to create the modal box

close

Type : Function

The function that you can call to close this instance of the modal box

Styling

Feel free to override the css with your own stuff, or modify the src/modalBox.css file

Build the project

npm install
// Gulp globally if you don;t already have it
npm install -g gulp
gulp

Generated css + js under bin/

Keywords

FAQs

Package last updated on 14 Feb 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc