Message notification box (JAVASCRIPT+CSS3)

Recently, the company's project has been given a message feedback box. Feel good and take it out and share it with you.

JavaScript section:

The parameters of the entry and exit are the default parameters except for Allnwesid, which have default values. You can modify it yourself. Click to zoom Out

Message Bar    Overall class= "Zwei_prompt"    title class= "Zwei_prompt_title"   content class= "Zwei_prompt_ Content "//news = new zwei. News ({//     "Allnewsid":  "Father element id",//     "title":  "title str",//      "Content":  "contents str",//     "color":  "BLACK",//      "Interval":  "existence time int"//});     zwei. news = function  (param)  {        this.content  = param.content | |   "What do you want to say?!";         this.title = param.title | |   "Day alien Sound";         this.interval = param.interval | |  3;        this.color = param.color | |   "BLACK";         this.clickpass = false;  &nBsp;     this.allnews = document.getelementbyid (param.allnewsId);         this.showEnd = function  (News)  {             if  (This.clickpass === false)   {                settimeout ( function  ()  {                     news.parentnode.removechild (News);                 }, 500);             }             news.style.transform =  "Scale (0.3)";             news.style.webkittransform =  "Scale (0.3)";        };         this.init = function  ()  {             var news = document.createelement ("div"),                 content =  Document.createelement ("P"),                 title = document.createelement ("P"),                 _this = this;             news.className =  "Zwei_prompt";             news.style.borderColor = this.color;             content.innerhtml = this.content;             content.classlist.add ("Zwei_prompt_content");             news.appendchild (content);             title.innerHTML = this.title;             title.classlist.add ("Zwei_prompt_title");             news.insertbefore (title, content);             this.allnews.appendchild (News);             news.onclick = function  ()  {                 _this.showend (News);                 news.onclick = null;                 _this.clickpass = true;             };             settimeout (function  ()  {                 _this.showend (News);             }, this.interval * 1000);         };        this.init ();    };

And there is the CSS code:

The style is simple, you can change it.

. zwei_prompt {position:relative;    top:0;    width:370px;    BORDER:1PX Black Solid;    margin:10px 0;    Transition:all 0.5s ease-in;    -webkit-transition:all 0.5s ease-in;    Cursor:pointer;    border-radius:10px; BORDER:2PX black Solid;}. Zwei_prompt_title:before,. zwei_prompt_title:after{content: "———————";}.    zwei_prompt_content,.zwei_prompt_title {text-align:center; Word-wrap:break-word;}. zwei_prompt_content {margin:20px 7px;}

As for some people ask Zwei is what ... That is my own JavaScript library, later, and so mature also posted out for everyone to see.

Ps:zwei is 2 in German.

Put a few pictures on it:

Message notification box (JAVASCRIPT+CSS3)