效果图：

源码：

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

html5+css3+javascript 自定义提示窗口的更多相关文章

  1. html5+css3+javascript 自定义弹出窗口

    效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  2. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  3. HTML5&CSS3&JavaScript&PHP&MySQL学习笔记

    1.在文字间添加一条水平线  使用<hr />  注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...

  4. 检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况

    CSS3 Selectors Test : 这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况.启动测试,浏览器会自动测验,并已列表的方式显示 ...

  5. HTML5 + CSS3 + JavaScript

    http://www.programmer.com.cn/14761/#more-14761 文/李晶 随着互联网产业的爆炸式增长,与之伴生的Web前端技术也在历经洗礼和蜕变.尤其是近几年随着移动终端 ...

  6. 《HTML5+CSS3+JavaScript 从入门到精通（标准版）》学习笔记(二)

    这是一个应用的例子,学以致用嘛 <!--这些代码我就直接放在了博客园的"页首Html代码"中,用于自定义博客,效果就是页面左上角的白色文字--> <p> & ...

  7. 《HTML5+CSS3+JavaScript 从入门到精通（标准版）》学习笔记（一）

    以下是以代码形式书写的笔记,本系列会持续更新,主要内容预计是类似下文的笔记,兼或一些思考与小项目,希望对你会有所帮助 1 <!-- --> <!DOCTYPE html>< ...

  8. 用HTML5/CSS3/JS开发Android/IOS应用框架大全

    现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...

  9. 好程序员技术分享html5和JavaScript的区别

    好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5.CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称.如PC端网站 ...

随机推荐

  1. 7.matlab字符串分析

    1 字符串处理函数 clc; clear all; str='My name is Robin.'; disp(str); %字符串的输出 str_size=size(str) %字符串的长度 str ...

  2. C#---爬虫抓取系列

    以前就尝试过研究了一些爬虫程序,也找过一些爬虫抓取软件,效果不是很好. 今天正好一个培训的网友给了我一个视频,正好研究下,收获颇丰.感谢那位哥们~ 1.首先讨论一下抓取一个页面 这里我写了模仿写了一个 ...

  3. 转载：【学习之家】Python中__init__.py文件的作用

    Python中__init__.py文件的作用详解 Python中__init__.py文件的作用详解 来源:学习之家 作者:xuexi110 人气:357 发布时间:2016-09-29 摘要:__ ...

  4. ubuntu16.04 安装配置matlab+python +cuda8.0+cudnn+opencv3.1的caffe环境

    网络上有很多ubuntu上caffe配置环境的帖子,本人照着其中的许多进行了参考,都出现了或多或少的错误,很多地方也有差异. 于是自己整理了下自己的安装过程,成功进行了测试,跑通了faster-rcn ...

  5. CF1041F Ray in the tube构造_思维

    不难发现起点必定是一个点. 每次间隔的距离一定是 2k2^k2k,关键就是要判断两点是否在同一跳跃距离上可被同时覆盖. 我们可以对上边进行 x1≡x_{1}\equivx1​≡ x2mod(2∗dx) ...

  6. git diff patch方法

    UNIX世界的软件开发大多都是协作式的,因此,Patch(补丁)是一个相当重要的东西,因为几乎所有的大型UNIX项目的普通贡献者,都是通过 Patch来提交代码的.作为最重要的开源项目之一,Linux ...

  7. Vue官网todoMVC示例

    这个示例是模仿官网示例样式和功能用我自己的方式写的,基本上没有看官网的源码,只参考自定义指令.让我们一步步来探讨一下.官网demo 要实现的功能 单条添加todo 单条删除todo 双击编辑todo ...

  8. Android S5PV210 fimc驱动分析 - fimc_capture.c

    fimc_capture.c在FIMC系统中的位置,网上偷来的一幅图片 http://blog.csdn.net/kickxxx/article/details/7733482 43 static c ...

  9. echarts图表属性说明

    参考博客: https://blog.csdn.net/luanpeng825485697/article/details/76691965

  10. 自备LocalDateTime工具类

    package cn.zytao.taosir.common.utils; import java.time.Instant; import java.time.LocalDate; import j ...