Js encapsulated code for Imitating qq message pop-up window

Pop-up windows are often used in our daily development or in our daily life. Here we use js to simulate a pop-up window with the same qq message.

Directly paste the Code:

 JavaScript code for the pop-up window in the lower right corner of the webpage<Script type = "text/javascript"> var ShowMsg = {title: 'hup', content: 'notifications in the simulated qq pop-up box ', width: '300px', height: '100px ', setTitle: function (value) {this. title = value ;}, setContent: function (value) {this. content = value ;}, getTitle: function () {return this. title ;}, getContent: function () {return this. content;}, show: function () {// pop-up window divvar _ winPopDiv = document. createElement ('div '); _ winPopDiv. id = "_ winPopDiv"; _winPopDiv.style.css Text = 'width: 300px; position: absolute; right: 0; bottom: 0; border: 1px solid #666; margin: 0; padding: 1px; overflow: hidden; display: block; '; // Message Title divvar _ titleDiv = document. createElement ('div '); _ titleDiv. id = "_ titleDiv"; _ titleDiv. innerHTML = this. getTitle (); _titleDiv.style.css Text = 'width: 100%; height: 22px; line-height: 20px; background: # FFCC00; font-weight: bold; text-align: left; font-size: 14px ;';_ WinPopDiv. appendChild (_ titleDiv); // close the message button spanvar _ closeSpan = document. createElement ('span '); _ closeSpan. id = "_ closeSpan"; _ closeSpan. innerHTML = "X" pai_closespan.style.css Text = 'position: absolute; right: 4px; top:-1px; color: # FFF; cursor: pointer; font-size: 14px ;'; _ titleDiv. appendChild (_ closeSpan); // content divvar _ conDiv = document. createElement ('div '); _ conDiv. id = "_ conDiv"; _conDiv.style.css Text = 'width: 10 0%; height: 110px; line-height: 80px; font-weight: bold; font-size: 12px; color: # FF0000; text-decoration: underline; text-align: center; '; _ conDiv. innerHTML = this. getContent (); _ winPopDiv. appendChild (_ conDiv); document. body. appendChild (_ winPopDiv); // closes the span binding event var closeDiv = document. getElementById ("_ closeSpan"); if (closeDiv. addEventListener) {closeDiv. addEventListener ("click", function (e) {if (window. event! = Undefined) {window. event. cancelBubble = true;} else if (e. stopPropagation) {e. stopPropagation ();} document.getElementById('_winPopDiv').style.css Text = "display: none;" ;}, false);} else if (closeDiv. attachEvent) {closeDiv. attachEvent ("onclick", function (e) {if (window. event! = Undefined) {window. event. cancelBubble = true;} else if (e. stopPropagation) {e. stopPropagation ();} document.getElementById('_winPopDiv').style.css Text = "display: none;" ;}) ;}}; ShowMsg. show (); </script>

For example:

Download source code:Http://download.csdn.net/download/xmt1139057136/7156929

You are welcome to follow my personal blog or join QQ Group 135430763 for learning!