脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript自定义提示窗口

javascript+html5+css3自定义提示窗口

 更新时间：2017年06月21日 10:47:42   作者：冷月葬残花  
这篇文章主要为大家详细介绍了javascript+html5+css3自定义提示窗口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

javascript自定义提示窗口效果图：

源码：

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);
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js停止冒泡和阻止浏览器默认行为的简单方法

    js停止冒泡和阻止浏览器默认行为的简单方法

    下面小编就为大家带来一篇js停止冒泡和阻止浏览器默认行为的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-05-05
  • js拖拉表格实现内容计算

    js拖拉表格实现内容计算

    这篇文章主要为大家详细介绍了js拖拉表格实现内容计算，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JS中如何轻松遍历对象属性的方式总结

    JS中如何轻松遍历对象属性的方式总结

    这篇文章主要给大家总结介绍了关于在JS中如何轻松遍历对象属性的方式，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-08-08
  • js判断IE浏览器版本过低示例代码

    js判断IE浏览器版本过低示例代码

    弄了个很简单的例子判断IE浏览器版本是否过低，注意在IE6和IE7版本较低情况下下才看到它的提示效果，需要的朋友可以收藏下
    2013-11-11
  • 原生js实现省市区三级联动代码分享

    原生js实现省市区三级联动代码分享

    这篇文章主要介绍了原生js实现省市区三级联动功能以及代码分享，对此有需要的朋友可以参考学习下。
    2018-02-02
  • Servlet实现文件上传，可多文件上传示例

    Servlet实现文件上传，可多文件上传示例

    本篇文章主要介绍了Servlet实现文件上传，可多文件上传示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • 使javascript也能包含文件

    使javascript也能包含文件

    使javascript也能包含文件...
    2006-10-10
  • 用javascript实现画板的代码

    用javascript实现画板的代码

    用javascript实现画板的代码...
    2007-09-09
  • 浅析JS中的原型,原型链和继承

    浅析JS中的原型,原型链和继承

    经典模式和圣杯模式都是用于解决构造函数继承和原型继承的问题,但它们在实现继承的方式上有所不同,本文主要来和大家聊聊经典模式和圣杯模式下原型,原型链和继承的实现,需要的可以参考下
    2023-09-09
  • JavaScript实现MIPS乘法模拟的方法

    JavaScript实现MIPS乘法模拟的方法

    这篇文章主要介绍了JavaScript实现MIPS乘法模拟的方法,实例分析了JavaScript实现MIPS乘法模拟的运算技巧,需要的朋友可以参考下
    2015-04-04

最新评论