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 相关文章推荐
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
动态加载jQuery的方法
Jun 16 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 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实现小型站点广告管理(修正版)
2006/10/09 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
smarty中js的调用方法示例
2014/10/27 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
Python字符串处理函数简明总结
2015/04/13 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
英国著名书店:Foyles
2018/12/01 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
.NET程序员的几道面试题
2012/06/01 面试题
EJB3推出JPA的原因
2013/10/16 面试题
2014学雷锋活动心得体会
2014/03/10 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
法律意见书范文
2015/06/04 职场文书
画展观后感
2015/06/17 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
导游词之太湖
2019/10/08 职场文书
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android