tomloprodModal
tomloprodModal is a simple and configurable javascript library to create responsive and minimalist modal windows with no dependencies.
DEMO: http://codepen.io/tomloprod/pen/kkYxWY
HTML & CSS Classes
tm-effect
: If has this class shows fade effects on modal windows and scale effect on main container (if exist).tm-draggable
: Defines if the modal window can be dragged.tm-emptyOnClose
: When has this CSS class, the content of this element (input or tag) will be cleared.
Example of modal window:
Login Remember me Lorem ipsum...
Initialization
TomloprodModalstart closeOut: true showMessages: true bgColor: "#FFFFFF" textColor: "#333333";
General Config Parameters
idMainContainer
: Used to display an scale animation when the modal window opens. (Dynamically add thetm-MainContainer
class to the element)draggable
: Whentrue
, all the modal window with the CSS classtm-draggable
can be dragged. @defaulttrue
bgColor
: Defines modal background color. @default#5c7d98
overlayColor
: Defines overlay color. @defaultrgba(0,0,0,0.8)
textColor
: Defines text and X button color. @default#FFFFFF
closeOnOverlay
: Enables or disables closing the modal window by clicking the overlay. @defaulttrue
showMessages
: Enables or disables de log messages. @defaultfalse
removeOverlay
: Whentrue
, remove the overlay if exist. @defaultfalse
closeOnEsc
: Enables or disables pressing the escape key to close the currently open modal. @defaulttrue
borderRadius
: Assign a border-radius to the modal windows. @example1em
@default0
Individual Config Parameters 1: data attributes
data-tm-title
: Will replace the title of the element withtm-title-text
class.data-tm-content
: Will replace the content of the element withtm-content
class.data-tm-bgcolor
: Will change the background color by the indicated value for the modal window that has this data attribute. @example#e74c3c
data-tm-textcolor
: Will change the text color by the indicated value for the modal window that has this data attribute. @example#FFFFFF
data-tm-closetimer
: Will close the modal window when the milliseconds pass. @example1000
Example of modal window with individual data attributes:
Lorem ipsum...
Individual Config Parameters 2: params
title
: Will replace the title of the element with the value oftitle
param.content
: Will replace the content of the elementwith the value oftitle
param.bgColor
: Will change the background color by the indicated value for the indicated modal window @example#e74c3c
textColor
: Will change the text color by the indicated value for the indicated modal window. @example#FFFFFF
closeTimer
: Will close the modal window when the indicated milliseconds pass. @example1000
Example of modal window with individual parameters:
TomloprodModal;
Miscellaneous
//////////// Create new modal with indicated params (without HTML)TomloprodModal; //////////// Stop operation of Tomloprod Modal.TomloprodModal; //////////// Open the modal window with the indicated IDTomloprodModal; //////////// Close the current modal windowTomloprodModal; //////////// Check if there are any open modal windowvar isOpen = TomloprodModalisOpen; //////////// Gets the current modal windowvar currentModalWindow = TomloprodModalmodal;
Handlers
///////////// OpeningTomloprodModal; ///////////// ClosingTomloprodModal; ///////////// Stop draggingTomloprodModal; ///////////// Register and remove handlersTomloprodModal; { console;} //////////// Deletes the listener of the indicated handler.TomloprodModal; /////////// Or, if the handler is omitted, deletes all:TomloprodModal;