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 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
MySQL数据源表结构图示
2008/06/05 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
vue中如何使用ztree
2018/02/06 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
python多线程同步实例教程
2019/08/11 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
python实现简单的tcp 文件下载
2020/09/16 Python
python 简单的调用有道翻译
2020/11/25 Python
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
数学系毕业生求职信
2014/05/29 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python