Corona HTML5 Modal Plugin

A Modal Window Plugin for Corona HTML5 Games and Apps.

👷 Built with Corona HTML5 Node Kit.

Browser Tests

Usage

Install

Download the plugin archive by clicking here.

Expand the archive, and move the modal_js.js and modal.lua files to your root project directory.

Your project tree should look like:

project/
  modal_js.js
  modal.lua
  main.lua
  ...

Require

local modal = require("modal")

API

create

Creates a new modal object. Modals are centered horizontally.

You must call the show method to display a created modal.

modal.create(config)

Config Table

Key	Description	Default	Required
content	The HTML content to place in the modal.	''	Y
width	The modal width in pixels.	728	N
height	The modal height in pixels.	90	N
top	The modal “y” position in pixels.	160	N
padding	Amount of padding in the modal as pixels.	0	N
bgColor	The modal background color as hex or named color value.	'#ffffff'	N
color	The modal default text color as hex or named color value.	'#000000'	N
border	Enabled borders on the modal.	false	N
borderSize	Set the border size in pixels. border must be enabled.	none	N
borderColor	Set the border color as hex or named color value. border must be enabled.	none	N
radius	The modal corner radius in pixels. Creates rounded corners.	none	N
shadow	Enable a drop shadow for the modal.	false	N

Example

local modal = require("modal")

modal.create({
  width = 600,
  height = 50,
  content = [[
    <p>Here is some HTML modal content.</p>
  ]]
})

modal.show()

show

Show the modal.

modal.show()

hide

Hide the modal.

modal.hide()

toggle

Toggle the modal from hide/show state.

modal.toggle()

resize

Resize the modal dynamically.

modal.resize(width, height)

Arguments

Key	Description	Default	Required
width	The modal width in pixels.	current width	Y
height	The modal height in pixels.	current height	Y

Notes

If you only want to change one of the dimensions, pass nil for the other.

setContent

Replace the HTML content in the modal dynamically.

modal.setContent(html_content)

Arguments

Key	Description	Default	Required
html_content	The HTML content to place in the modal.	''	Y

destroy

Destroy the modal object. You will need to use create to start a new modal.

modal.destroy()

Modal Content

Images

You can use images that are stored in your Corona HTML5 output directory in the modal content.

output_html5/
  image.png
  ...

Example

local html = [[
  <div>
    <img src="image.png" />
  </div>
]]

modal.create({
  content = html
})

modal.show()

Closing

To hide the modal window from within the HTML content, use the javascript method modal.hide() within an onclick event.

Example

<button onclick="modal.hide()">Close</button>

Events

You can set up an event listener to listen for modal events. The following event types are supported:

• hide
• show
• resize
• destroy

Example

local function onModalEvent(e)
  if e.type == 'resize' then
    print('modal was resized')
  end
end

modal.addEventListener('modal', onModalEvent)

Demo

You can download a demo project by clicking here.

---

©2018 C. Byerley (develephant)