菜单

html5+css3+javascript 自定义提醒窗口

2019年6月15日 - Bootstrap

javascript自定义提醒窗口成效图:

效果图:

图片 1

图片 2

源码:

源码:

1.demo.jsp

  1.demo.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>自定义提示窗口</title>
  <script type="text/javascript" src="js/myAlert.js"></script>
  <script type="text/javascript">
    function bodyOnload() {
      var myInput = document.getElementById("myInput");
      myInput.style.border = "none";
      myInput.style.backgroundColor = "rgba(223, 230, 223, 0.3)";
      myInput.value = "请输入你的名字:";
      myInput.onfocus = function () {
        myInput.style.outline = "none";
        myInput.value = "";
      };
      var image_div = document.createElement("div");
      image_div.style.width = myInput.offsetHeight ;
      image_div.style.height = myInput.offsetHeight;
      image_div.style.float = "right";
      image_div.style.cursor = "pointer";
      image_div.onclick = function () {
       new MyAlert().alert("系统提示","click the image_div",5000);
      };
      var outer_div = document.createElement("div");
      outer_div.style.border = "1px solid red";
      outer_div.style.width = parseInt(myInput.offsetWidth) + parseInt(image_div.style.width);
      outer_div.style.height = myInput.offsetHeight;
      document.body.appendChild(outer_div);
      outer_div.appendChild(myInput);
      outer_div.appendChild(image_div);
    }
  </script>
</head>
<body onload="bodyOnload()">
   <input id="myInput" type="text" name="name" title="名字"/>
</body>
</html>
 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

  2.myAlert.js

/**
 * Created by zhuwenqi on 2017/6/20.
 */
/**
 * @param options 基本配置
 * @constructor 
 */
function MyAlert(options) {
  this.options = options ;
}
/**
 * 提示窗口
 * @param title 提示标题,默认为""
 * @param content 提示内容,默认为""
 * @param closeTime 提示窗口自动关闭时间,单位为ms,默认为2000ms
 */
MyAlert.prototype.alert = function (title,content,closeTime) {
  var div_background = document.createElement("div");
  div_background.style.position = "absolute";
  div_background.style.left = "0";
  div_background.style.top = "0";
  div_background.style.width = "100%";
  div_background.style.height = "100%";
  div_background.style.backgroundColor = "rgba(0,0,0,0.1)";
  div_background.style.zIndex = "1001";
  var div_alert = document.createElement("div");
  div_alert.style.position = "absolute";
  div_alert.style.left = "40%";
  div_alert.style.top = "0";
  div_alert.style.width = "20%";
  div_alert.style.height = "20%";
  div_alert.style.overflow = "auto";
  div_alert.style.backgroundColor = "rgba(255,255,255,0.5)";
  div_alert.style.zIndex = "1002";
  div_alert.style.border = "1px solid blue";
  div_alert.style.borderRadius = "10px";
  div_alert.style.boxShadow = "0 0 10px gray";
  var div_title = document.createElement("div");
  div_title.style.backgroundColor = "rgba(0,255,0,0.3)";
  div_title.style.textAlign = "center";
  var span_title = document.createElement("span");
  span_title.style.fontSize = "20px";
  span_title.style.fontWeight = "bold";
  var text_title = document.createTextNode((title === undefined || title === null) ? "" : title) ;
  span_title.appendChild(text_title);
  div_title.appendChild(span_title);
  div_alert.appendChild(div_title);
  var div_content = document.createElement("div");
  div_content.style.lineHeight = "35px";
  div_content.style.paddingLeft = "10px";
  var span_content = document.createElement("span");
  var text_content = document.createTextNode((content === undefined || content === null) ? "" : content);
  span_content.appendChild(text_content);
  div_content.appendChild(span_content);
  div_alert.appendChild(div_content);
  document.body.appendChild(div_background);
  document.body.appendChild(div_alert);
  setTimeout(function () {
    document.body.removeChild(div_alert);
    document.body.removeChild(div_background);
  },(closeTime === undefined || closeTime === null || closeTime === "") ? 2000 : closeTime);
};
 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 };

上述正是本文的全体内容,希望对大家的求学抱有支持,也盼望大家多多协理脚本之家。

你或者感兴趣的稿子:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图