html5+css3+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);

 };

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

html5+css3+javascript 自定义弹出窗口
效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...
HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
HTML5&CSS3&JavaScript&PHP&MySQL学习笔记
1.在文字间添加一条水平线使用<hr /> 注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...
检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况
CSS3 Selectors Test : 这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况.启动测试,浏览器会自动测验,并已列表的方式显示 ...
HTML5 + CSS3 + JavaScript
http://www.programmer.com.cn/14761/#more-14761 文/李晶随着互联网产业的爆炸式增长,与之伴生的Web前端技术也在历经洗礼和蜕变.尤其是近几年随着移动终端 ...
《HTML5+CSS3+JavaScript 从入门到精通（标准版）》学习笔记(二)
这是一个应用的例子,学以致用嘛  <p> & ...
《HTML5+CSS3+JavaScript 从入门到精通（标准版）》学习笔记（一）
以下是以代码形式书写的笔记,本系列会持续更新,主要内容预计是类似下文的笔记,兼或一些思考与小项目,希望对你会有所帮助 1  <!DOCTYPE html>< ...
用HTML5/CSS3/JS开发Android/IOS应用框架大全
现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...
好程序员技术分享html5和JavaScript的区别
好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5.CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称.如PC端网站 ...

随机推荐

C#调用mmpeg进行各种视频转换的类实例
本文实例讲述了C#调用mmpeg进行各种视频转换的类.分享给大家供大家参考.具体如下: 这个C#类封装了视频转换所需的各种方法,基本上是围绕着如何通过mmpeg工具来进行视频转换 using Syst ...
python面向对象与结构成员之间的关系
1面向对象结构分析:----面向对象整体大致分为两块区域:-------第一部分:静态字段(静态变量)部分-------第二部分:方法部分--每个区块可以分为多个小部分 class A: countr ...
函数与装饰器Python学习（三）
1.1 文件处理 1.1.1 打开文件过程在Python中,打开文件,得到文件句柄并赋值给一个变量,默认打开模式就为r f=open(r'a.txt','w',encoding='utf-8') p ...
Python2以及Python3中的除法
前言在讨论话题之前,我们先说下程序中除法的三种情况: 1. 传统的除法,我称之为整型地板除.在C.C++.Java中常见,特点是整数相除舍弃小数取整,浮点数相除则保留小数(如果有). >> ...
ZBrush中SnakeHook蛇钩笔刷介绍
不同笔刷用着不同的作用,绘画出来的效果也是千姿百态,各有千秋,有些笔刷在使用的时候可以替代,但有些笔刷是无法替代,不可超越的,比如ZBrush®中给我们提供的,SnakeHook笔刷,该笔刷在模型表面 ...
Pyhton学习——Day29
#异常与错误# 什么是异常?# 异常就是程序运行时发生错误的信号,在程序出现错误时,则会产生异常,若没有程序处理,则会抛出异常# 导致程序在异常语句处崩溃终止# Traceback 追踪异常信号:** ...
python安装Redis数据库
where pip cd 切换这个目录 pip install redis import redis r = redis.Redis(host='127.0.0.1', port=6379) user ...
《Exception》第八次团队作业：Alpha冲刺（第一天）
一.项目基本介绍项目内容这个作业属于哪个课程任课教师博客主页链接这个作业的要求在哪里作业链接地址团队名称 Exception 作业学习目标 1.掌握软件测试基础技术.2.学习迭代式增量软 ...
PHP内置SOAP扩展客户端的使用例子
SOAP已经是属于OUT范畴的技术了,不过因为历史原因,时不时还是会用到它,以前都是用NuSOAP,现在准备试试PHP内置的SOAP扩展.由于文本只打算说说客户端的用法,所以得先找一些能直接用的服务端 ...
[读书笔记] R语言实战（十四）主成分和因子分析
主成分分析和探索性因子分析是用来探索和简化多变量复杂关系的常用方法,能解决信息过度复杂的多变量数据问题. 主成分分析PCA:一种数据降维技巧,将大量相关变量转化为一组很少的不相关变量,这些无关变量称为 ...

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

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

随机推荐

热门专题