效果图：
源码：
1.demo.jsp
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>自定义提示窗口</title>
5 <script type="text/javascript" src="js/myAlert.js"></script>
6 <script type="text/javascript">
7 function bodyOnload() {
8 var myInput = document.getElementById("myInput");
9 myInput.style.border = "none";
10 myInput.style.backgroundColor = "rgba(223, 230, 223, 0.3)";
11 myInput.value = "请输入你的名字：";
12 myInput.onfocus = function () {
13 myInput.style.outline = "none";
14 myInput.value = "";
15 };
16 var image_div = document.createElement("div");
17 image_div.style.width = myInput.offsetHeight ;
18 image_div.style.height = myInput.offsetHeight;
19 image_div.style.float = "right";
20 image_div.style.cursor = "pointer";
21 image_div.onclick = function () {
22 new MyAlert().alert("系统提示","click the image_div",5000);
23 };
24 var outer_div = document.createElement("div");
25 outer_div.style.border = "1px solid red";
26 outer_div.style.width = parseInt(myInput.offsetWidth) + parseInt(image_div.style.width);
27 outer_div.style.height = myInput.offsetHeight;
28 document.body.appendChild(outer_div);
29 outer_div.appendChild(myInput);
30 outer_div.appendChild(image_div);
31 }
32 </script>
33 </head>
34 <body onload="bodyOnload()">
35 <input id="myInput" type="text" name="name" title="名字"/>
36 </body>
37 </html>
2.myAlert.js
1 /**
2 * Created by zhuwenqi on 2017/6/20.
3 */
4 /**
5 * @param options 基本配置
6 * @constructor
7 */
8 function MyAlert(options) {
9 this.options = options ;
10 }
11 /**
12 * 提示窗口
13 * @param title 提示标题，默认为""
14 * @param content 提示内容,默认为""
15 * @param closeTime 提示窗口自动关闭时间，单位为ms，默认为2000ms
16 */
17 MyAlert.prototype.alert = function (title,content,closeTime) {
18 var div_background = document.createElement("div");
19 div_background.style.position = "absolute";
20 div_background.style.left = "0";
21 div_background.style.top = "0";
22 div_background.style.width = "100%";
23 div_background.style.height = "100%";
24 div_background.style.backgroundColor = "rgba(0,0,0,0.1)";
25 div_background.style.zIndex = "1001";
26 var div_alert = document.createElement("div");
27 div_alert.style.position = "absolute";
28 div_alert.style.left = "40%";
29 div_alert.style.top = "0";
30 div_alert.style.width = "20%";
31 div_alert.style.height = "20%";
32 div_alert.style.overflow = "auto";
33 div_alert.style.backgroundColor = "rgba(255,255,255,0.5)";
34 div_alert.style.zIndex = "1002";
35 div_alert.style.border = "1px solid blue";
36 div_alert.style.borderRadius = "10px";
37 div_alert.style.boxShadow = "0 0 10px gray";
38 var div_title = document.createElement("div");
39 div_title.style.backgroundColor = "rgba(0,255,0,0.3)";
40 div_title.style.textAlign = "center";
41 var span_title = document.createElement("span");
42 span_title.style.fontSize = "20px";
43 span_title.style.fontWeight = "bold";
44 var text_title = document.createTextNode((title === undefined || title === null) ? "" : title) ;
45 span_title.appendChild(text_title);
46 div_title.appendChild(span_title);
47 div_alert.appendChild(div_title);
48 var div_content = document.createElement("div");
49 div_content.style.lineHeight = "35px";
50 div_content.style.paddingLeft = "10px";
51 var span_content = document.createElement("span");
52 var text_content = document.createTextNode((content === undefined || content === null) ? "" : content);
53 span_content.appendChild(text_content);
54 div_content.appendChild(span_content);
55 div_alert.appendChild(div_content);
56 document.body.appendChild(div_background);
57 document.body.appendChild(div_alert);
58 setTimeout(function () {
59 document.body.removeChild(div_alert);
60 document.body.removeChild(div_background);
61 },(closeTime === undefined || closeTime === null || closeTime === "") ? 2000 : closeTime);
62 };