欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-24 17:08:03
javascript自定义提示窗口效果图： 源码： 1.demo.jsp <%@ page contenttype="text/html;chars...

javascript自定义提示窗口效果图：

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

源码：

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>

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);
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： vue的hash值原理也是table切换实例代码

下一篇： 深入浅析Nodejs的Http模块

推荐阅读