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 css styleFloat和cssFloat
Mar 15 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
详解ES6中的let命令
Apr 05 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
详解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
PHP4实际应用经验篇(1)
2006/10/09 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
jquery 列表双向选择器之改进版
2013/08/09 Javascript
js获取域名的方法
2015/01/27 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
Python isinstance判断对象类型
2008/09/06 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
浅析Python中的多条件排序实现
2016/06/07 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
python连接mongodb集群方法详解
2020/02/13 Python
Python可以实现栈的结构吗
2020/05/27 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
python 模块导入问题汇总
2021/02/01 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
个人教师自我评价范文
2013/12/02 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
公司离职证明标准格式
2014/11/18 职场文书
项目建议书
2015/02/04 职场文书
小学生读书笔记
2015/07/01 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python