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 相关文章推荐
js返回上一页并刷新代码整理
Dec 21 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
JavaScript 常见的继承方式汇总
Sep 17 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
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
node.js使用require()函数加载模块
2014/11/26 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
vue实现图片上传预览功能
2019/12/23 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
详解python之简单主机批量管理工具
2017/01/27 Python
django 多数据库配置教程
2018/05/30 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
党校学习自我鉴定
2014/02/24 职场文书
大学生求职信例文
2014/06/29 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
开票证明
2015/06/23 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
课改心得体会范文
2016/01/25 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang