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


Posted in Javascript onJune 21, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的对象化编程
Jan 16 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
详解webpack分离css单独打包
Jun 21 #Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 #Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 #Javascript
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
详解Angular 自定义结构指令
Jun 21 #Javascript
详解Angular2 之 结构型指令
Jun 21 #Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 #Javascript
You might like
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
php验证手机号码
2015/11/11 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
自己使用总结Python程序代码片段
2015/06/02 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
期末考试动员演讲稿
2014/01/10 职场文书
美德好少年事迹材料
2014/01/19 职场文书
工程师岗位职责规定
2014/02/26 职场文书
支行行长岗位职责
2015/02/15 职场文书
标枪加油稿
2015/07/22 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
DE1103使用报告
2022/04/05 无线电
Linux安装Docker详细教程
2022/07/07 Servers
nginx访问报403错误的几种情况详解
2022/07/23 Servers