js-popup

1.0.4 • Public • Published

js-popup

Codacy grade David Travis Download Count

Demo image

Simple popup messages for JavaScript/ReactJS. Demo

Install

npm install js-popup

Or if you want you can download files here.

Usage

Include the js-popup module, e.g.:

var PopupClass = require('js-popup');
// or es6:
import PopupClass from 'js-popup';

You must to use some css compiler. I recommend browserify-css.

Next create new popup class:

Popup = new PopupClass();

Now you can creates new popup windows:

let messageText = "Message text";
let messageName = "New message";
Popup.show(messageText, messageName)};

If you dont set messageName, popup window will be without header, only message body.

If you need to close all popups just run:

Popup.hideAll()

Properties

new PopupClass({width, maxHeight}, timeout, onClickFunction)

width (optional, Integer)

new PopupClass({width: 200});

You can set your popup window width. Default is 200. Min width is 80. (px)

maxHeight (optional, Integer)

new PopupClass({maxHeight: 200});

You can set your popup window max-height. Default is 80. (px)

timeout (optional, Integer)

new PopupClass(false, 3000);

You can set your popup window lifetime. Default is 5000. (ms)

onClickFunction (optional, function)

function demo(){
  console.log("Demo function");
}
new PopupClass(false, false, demo);

Here you can set your function on click to message body. Default is none.

Demo

ReactJS

import React from 'react';
import ReactDOM from 'react-dom';
import PopupClass from 'js-popup';
 
let Popup = new PopupClass({width: 200, maxHeight: 100}, false, false);
 
const DemoView = React.createClass({
    getInitialState() {
        return ({
            text: "Demo message",
            header: "New message"
        });
    },
    render(){
        return (
            <button onClick={()=>Popup.show(this.state.text, this.state.header)}>Click me</button>
        );
    }
});
 
ReactDOM.render(<MainView/>, document.getElementById('app') );

Also you need to connect css: <link rel="stylesheet" type="text/css" href="release/js-popup.css">

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js-popup</title>
 
    <link rel="stylesheet" type="text/css" href="release/js-popup.css">
    <script src="release/js-popup.js"></script> 
 
    <script>
        let Popup = new PopupClass({width: 200, maxHeight: 100}, false, false);
    </script> 
</head>
<body>
    <button onclick="Popup.show('Hello world')">Demo</button>
</body>
</html>

Own popup layout Demo

You can pass your own popup message layout, for that you need to pass message layout instead {width, maxHeight}. It must be string and elements must have id:

For header element - PM_header;
For close button - PM_close_button;
For text element - PM_body;
If message block will not contain element with PM_header, close and onClickFunction listener will be added to message block. The same as in native layout without header name.

Also to main element add class PM_own_layout.

ReactJS - own message layout

import React from 'react';
import ReactDOM from 'react-dom';
import PopupClass from 'js-popup';
 
const Message = React.createClass({
    render(){
        return (<div className="PM_own_layout message">
            <div id="PM_header" className="header_class">
                <p>Message</p>
                <button id="PM_close_BTN" className="close_button_class"/>
            </div>
            <div id="PM_body" className="text">Message text 2</div>
        </div>);
    }
});
 
let Popup = new PopupClass(ReactDOMServer.renderToString(<Message/>), false, false);
 
const DemoView = React.createClass({
    getInitialState() {
        return ({
            text: "Demo message",
            header: "New message"
        });
    },
    render(){
        return (
            <button onClick={()=>Popup.show(this.state.text, this.state.header)}>Click me</button>
        );
    }
});
 
ReactDOM.render(<MainView/>, document.getElementById('app') );

JavaScript - own message layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js-popup</title>
 
    <link rel="stylesheet" type="text/css" href="dev/css/js-popup.css">
    <script src="dev/js/js-popup.js"></script> 
 
    <style type="text/css">
        .massage{
            width: 200px;
            height: 50px;
            line-height: 50px;
            background: red;
            cursor: pointer;
        }
        .text{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
    </style> 
 
    <script>
        let e = '<div class="PM_own_layout massage"> <div id="PM_body" class="text">Message text 2</div> </div>';
        let Popup = new PopupClass(e, false, false);
    </script> 
</head>
<body>
    <button onclick="Popup.show('Hello world')">Demo</button>
</body>
</html>

License

Apache License 2.0

Package Sidebar

Install

npm i js-popup

Weekly Downloads

5

Version

1.0.4

License

Apache-2.0

Last publish

Collaborators

  • exelban