效果图:

源码:

  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 自定义提示窗口的更多相关文章

  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. 20.QT文本文件读写

    #include "mainwindow.h" #include "ui_mainwindow.h" #include <QFile> #inclu ...

  2. jQuery中文学习站点

    jQuery是一个快速.简单的Javascript library,它简化了HTML文件的traversing,事件处理.动画.Ajax互动,从而方便了网页制作的快速发展.jQuery是为改变你编写J ...

  3. 开发辅助 | 前端开发工程师必懂的 UI 知识

           移动 UI 设计的世界 ... 1.屏幕尺寸 屏幕大小,指屏幕对角线的长度,而不是屏幕的宽度或高度: 单位为英寸 如 iPhone 7 屏幕尺寸为 4.7 英寸:三星 S6 屏幕尺寸为 ...

  4. 在IIS 10中注册自定义的IHttpModule

    环境:Visual Studio 2015, IIS Express 10, ASP.NET 4.5 演示代码:http://files.cnblogs.com/files/joe-yang/Rewr ...

  5. 『转』How to Think About Your Career

    开始工作的伊始,逐渐转载及阅读Medium上知名华裔设计师Julie Zhuo的文章,这是她在medium上的介绍:Product design VP @ Facebook. Lover of foo ...

  6. ZBrush中物体的显示与隐藏

    在ZBrush®中除了遮罩功能可以对局部网格进行编辑外,通过显示和隐藏局部网格也可以对局部进行控制.选择网格的控制都是手动操作,在软件中并没有相应的命令进行操作.选择局部网格的工作原理也很简单,即被选 ...

  7. 转:用java调用oracle存储过程总结(比较好理解)

    这段时间开始学习写存储过程,主要原因还是因为工作需要吧,本来以为很简单的,但几经挫折,豪气消磨殆尽,但总算搞通了,为了避免后来者少走弯路,特记述与此,同时亦对自己进行鼓励. 一:无返回值的存储过程 存 ...

  8. js数组的一些骚操作 (用一行代码实现)

    1.扁平化n维数组 1.终极篇 [1,[2,3]].flat(2) //[1,2,3] [1,[2,3,[4,5]].flat(3) //[1,2,3,4,5] [1[2,3,[4,5[...]].f ...

  9. HDU1027 Ignatius and the Princess II( 逆康托展开 )

    链接:传送门 题意:给出一个 n ,求 1 - n 全排列的第 m 个排列情况 思路:经典逆康托展开,需要注意的时要在原来逆康托展开的模板上改动一些地方. 分析:已知 1 <= M <= ...

  10. UVALive-8077 Brick Walls 找规律

    题目链接:https://cn.vjudge.net/problem/UVALive-8077 题意 有一个用砖头磊起来的墙,现在又有一只蚂蚁,想沿着砖缝从起点跑到终点. 问最短路长度. 思路 找规律 ...