tomloprodModal

1.0.2 • Public • Published

tomloprodModal Release License Build Status npm versionBower version


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:

<div 
    class="tm-modal 
    tm-effect tm-draggable" 
    data-tm-bgcolor = "#3498db"
    data-tm-textcolor = "white"
    id="logInPopUp">
    
    <div class="tm-wrapper">
        <div class="tm-title">
            <span class="tm-XButton tm-closeButton"></span>  
            <h3 class="tm-title-text">Login</h3> 
        </div>
        <div class="tm-content">
            <form style="text-align:center;">
                <p>
                    <input class="tm-emptyOnClose" placeholder="User" required="" type="text">
                </p>
                <p>
                    <input class="tm-emptyOnClose" placeholder="Password" required="" type="password">
                </p>
                <p>
                    <input id="remember" name="remember" type="checkbox" value="1">
                    <label for="remember">Remember me</label>
                </p>
                <p>
                    <input value="Log in" type="submit">
                </p>
            </form>
        </div>
    </div>
</div>
 
<div id="myMainContainer"> Lorem ipsum... </div>
 

Initialization


TomloprodModal.start({
    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 the tm-MainContainer class to the element)
  • draggable: When true, all the modal window with the CSS class tm-draggable can be dragged. @default true
  • bgColor: Defines modal background color. @default #5c7d98
  • overlayColor: Defines overlay color. @default rgba(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. @default true
  • showMessages: Enables or disables de log messages. @default false
  • removeOverlay: When true, remove the overlay if exist. @default false
  • closeOnEsc: Enables or disables pressing the escape key to close the currently open modal. @default true
  • borderRadius: Assign a border-radius to the modal windows. @example 1em @default 0

Individual Config Parameters 1: data attributes


  • data-tm-title: Will replace the title of the element with tm-title-text class.
  • data-tm-content: Will replace the content of the element with tm-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. @example 1000

Example of modal window with individual data attributes:

<div 
    data-tm-title="tomloprodModal 1" 
    data-tm-bgcolor = "#e74c3c"
    data-tm-textcolor = "white"
    data-tm-closetimer="3000"
    data-tm-content="My background color is red! :-) <p><b>And I will self-destruct in 3 seconds</b>" 
    class="tm-modal tm-effect tm-draggable" 
    id="testModal1">
    
    <div class="tm-wrapper">
        <div class="tm-title">
            <span class="tm-XButton tm-closeButton"></span>  
            <h3 class="tm-title-text"> </h3> 
        </div>
        <div class="tm-content"> </div>
    </div>
    
</div>
 
<div id="myMainContainer"> Lorem ipsum... </div>

Individual Config Parameters 2: params


  • title: Will replace the title of the element with the value of title param.
  • content: Will replace the content of the elementwith the value of title 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. @example 1000

Example of modal window with individual parameters:

TomloprodModal.openModal("testModal", {
    bgColor: "#FFFFFF",
    textColor: "#333333",
    title: "Hi!",
    content: "Nothing to say",
    closeTimer: 1000
});

Miscellaneous


 
//////////// Create new modal with indicated params (without HTML)
TomloprodModal.create({
    bgColor: "#FFFFFF",
    textColor: "#333333",
    title: "Hi!",
    content: "Nothing to say",
    closeTimer: 1000
});
 
//////////// Stop operation of Tomloprod Modal.
TomloprodModal.stop();
 
//////////// Open the modal window with the indicated ID
TomloprodModal.openModal("logInPopUp");
 
//////////// Close the current modal window
TomloprodModal.closeModal();
 
//////////// Check if there are any open modal window
var isOpen = TomloprodModal.isOpen;
 
//////////// Gets the current modal window
var currentModalWindow = TomloprodModal.modal;

Handlers


///////////// Opening
TomloprodModal.registerHandler("opened", function () {
    console.info("Opening " + TomloprodModal.modal.id);
});
 
///////////// Closing
TomloprodModal.registerHandler("closed", function () {
    console.info("Closing " + TomloprodModal.modal.id);
});
 
///////////// Stop dragging
TomloprodModal.registerHandler("stopDragging", function () {
    console.info("Coord X: " + TomloprodModal.modal.style.left + ' | Coord Y: ' + TomloprodModal.modal.style.top);
});
 
///////////// Register and remove handlers
TomloprodModal.registerHandler("opened", myOpenedHandler);
 
function myOpenedHandler(){
     console.info("Opening " + TomloprodModal.modal.id);
}
 
//////////// Deletes the listener of the indicated handler.
TomloprodModal.removeHandler('opened', myOpenedHandler);
 
/////////// Or, if the handler is omitted, deletes all:
TomloprodModal.removeHandler('opened');

Readme

Keywords

none

Package Sidebar

Install

npm i tomloprodModal

Weekly Downloads

0

Version

1.0.2

License

MIT

Last publish

Collaborators

  • tomloprod