效果图：
源码：
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 };