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 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
vue实现选中效果
Oct 07 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PDO::setAttribute讲解
2019/01/29 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
js消除图片小游戏代码
2019/12/11 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Python的设计模式编程入门指南
2015/04/02 Python
python实现多人聊天室
2020/03/31 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
车工岗位职责
2013/11/26 职场文书
个人简历自我评价
2014/02/02 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
店长岗位职责
2015/02/11 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
煤矿安全保证书
2015/02/27 职场文书
会计求职简历自我评价
2015/03/10 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs