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

2019-11-19 16:17:38

字体：大中小

来源：转载

供稿：网友

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

源码：

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

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

上一篇：微信小程序图片自适应支持多图实例详解

下一篇：详解webpack分离css单独打包