js-popup
Simple popup messages for JavaScript/ReactJS. Demo
Or if you want you can download files here .
Include the js-popup module, e.g.:
var PopupClass = require ( ' js-popup ' ) ;
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:
new PopupClass ( { width , maxHeight } , timeout , onClickFunction )
new PopupClass ( { width : 200 } ) ;
You can set your popup window width. Default is 200. Min width is 80. (px)
new PopupClass ( { maxHeight : 200 } ) ;
You can set your popup window max-height. Default is 80. (px)
new PopupClass ( false , 3000 ) ;
You can set your popup window lifetime. Default is 5000. (ms)
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.
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">
<! 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;PM_close_button;PM_body;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.
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 ' ) ) ;
<! 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 : 200 px ;
height : 50 px ;
line-height : 50 px ;
background : red ;
cursor : pointer ;
}
. text {
width : 100 % ;
height : 100 % ;
text-align : center ;
font-size : 16 px ;
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 >
Apache License 2.0
