js-popup
v1.0.4
Published
Simple popup messages for JavaScript/ReactJS.
Downloads
14
Maintainers
exelbanReadme
js-popup
Simple popup messages for JavaScript/ReactJS. Demo
Install
npm install js-popupOr 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>