效果图：

源码：

　　1.demo.jsp

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>

 <html>

 <head>

     <title>自定义弹出窗口</title>

     <script type="text/javascript" src="js/myLayer.js"></script>

     <style type="text/css">

         button{

             width: 50px;

             height: 50px;

             border: 1px solid blue;

             background-color: blue;

             color: red;

             border-radius: 5px;

             -webkit-box-shadow: 2px 2px 2px gray;

             -moz-box-shadow: 2px 2px 2px gray ;

             box-shadow: 2px 2px 2px gray ;

         }

         button:hover{

             background-color: green;

             cursor: pointer;

         }

     </style>

     <script type="text/javascript">

         function openWindow() {

             new MyLayer({

                 top:"10%",

                 left:"10%",

                 width:"80%",

                 height:"80%",

                 title:"我的标题",

                 content:"操作成功"

             }).openLayer();

         }

     </script>

 </head>

 <body>

     <button type="button" onclick="openWindow()">打开弹窗</button>

 </body>

 </html>

　　2.myLayer.js

 /**

  * Created by zhuwenqi on 2017/6/16.

  */

 /**

  * @param options 弹窗基本配置信息

  * @constructor 构造方法

  */

 function MyLayer(options) {

     this.options = options ;

 }

 /**

  * 打开弹窗

  */

 MyLayer.prototype.openLayer = function () {

     var background_layer = document.createElement("div");

     background_layer.style.display = "none";

     background_layer.style.position = "absolute";

     background_layer.style.top =  "0px";

     background_layer.style.left = "0px";

     background_layer.style.width = "100%";

     background_layer.style.height = "100%";

     background_layer.style.backgroundColor = "gray";

     background_layer.style.zIndex = "1001";

     background_layer.style.opacity = "0.8" ;

     var open_layer = document.createElement("div");

     open_layer.style.display = "none";

     open_layer.style.position = "absolute";

     open_layer.style.top = this.options.top === undefined ? "10%" : this.options.top;

     open_layer.style.left = this.options.left === undefined ? "10%" :this.options.left;

     open_layer.style.width = this.options.width === undefined ? "80%" : this.options.width;

     open_layer.style.height = this.options.height === undefined ? "80%" : this.options.height;

     open_layer.style.border = "1px solid lightblue";

     open_layer.style.borderRadius = "15px" ;

     open_layer.style.boxShadow = "4px 4px 10px #171414";

     open_layer.style.backgroundColor = "white";

     open_layer.style.zIndex = "1002";

     open_layer.style.overflow = "auto";

     var div_toolBar = document.createElement("div");

     div_toolBar.style.textAlign = "right";

     div_toolBar.style.paddingTop = "10px" ;

     div_toolBar.style.backgroundColor = "aliceblue";

     div_toolBar.style.height = "40px";

     var span_title = document.createElement("span");

     span_title.style.fontSize = "18px";

     span_title.style.color = "blue" ;

     span_title.style.float = "left";

     span_title.style.marginLeft = "20px";

     var span_title_content = document.createTextNode(this.options.title === undefined ? "" : this.options.title);

     span_title.appendChild(span_title_content);

     div_toolBar.appendChild(span_title);

     var span_close = document.createElement("span");

     span_close.style.fontSize = "16px";

     span_close.style.color = "blue" ;

     span_close.style.cursor = "pointer";

     span_close.style.marginRight = "20px";

     span_close.onclick = function () {

         open_layer.style.display = "none";

         background_layer.style.display = "none";

     };

     var span_close_content = document.createTextNode("关闭");

     span_close.appendChild(span_close_content);

     div_toolBar.appendChild(span_close);

     open_layer.appendChild(div_toolBar);

     var div_content = document.createElement("div");

     div_content.style.textAlign = "center";

     var content_area = document.createTextNode(this.options.content === undefined ? "" : this.options.content);

     div_content.appendChild(content_area);

     open_layer.appendChild(div_content);

     document.body.appendChild(open_layer);

     document.body.appendChild(background_layer);

     open_layer.style.display = "block" ;

     background_layer.style.display = "block";

 };

html5+css3+javascript 自定义弹出窗口的更多相关文章

  1. CSS3/jQuery自定义弹出窗口

    简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css   index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...

  2. 读《深入理解Windows Phone 8.1 UI控件编程》1.4.3 框架的应用示例：自定义弹出窗口有感

    前些天买了园子里林政老师的两本 WP8.1 的书籍.毕竟想要学得深入的话,还是得弄本书跟着前辈走的. 今天读到 1.4.3 节——框架的应用示例:自定义弹出窗口这一小节.总的来说,就是弄一个像 Mes ...

  3. JavaScript 之 弹出窗口总结

    一.javascript 控制窗口关闭及刷新 //关闭弹窗 <script language="javascript"> window.close(); </sc ...

  4. 【Android】百度地图自定义弹出窗口

    我们使用百度地图的时候,点击地图上的Marker,会弹出一个该地点详细信息的窗口,如下左图所示,有时候,我们希望自己定义这个弹出窗口的内容,或者,干脆用自己的数据来构造这样的弹出窗口,但是,在百度地图 ...

  5. html里面自定义弹出窗口

    网页上默认的提示框或对话框一般比较丑,可以利用div遮盖层来自定义对话框 1.定义一个按钮或者链接(项目里面是通过点击一个图片) <img src="images/zz.gif&quo ...

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

    效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  7. JavaScript 显示弹出窗口(二)

    window. open ( sURL , sName , sFeatures , bReplace ) sURL:可选项,被加载页面的html sName:可选项,指定打开的窗口的名字 _media ...

  8. JavaScript 显示弹出窗口

    window . showModalDialog ( sURL,vArguments , sFeatures )参数说明: sURL--必选参数,用来指定对话框要显示的文档的URL. //要显示页面的 ...

  9. UpdatePanel无法直接弹出窗口的解决

    UpdatePanel无法直接弹出窗口的解决 2010-06-20  来自:博客园  字体大小:[大 中 小] 摘要:本文介绍一些UpdatePanel无法直接弹出窗口的解决方法 ///<sum ...

随机推荐

  1. [转]数据库事务中的隔离级别和锁+spring Transactional注解

    数据库事务中的隔离级别和锁 数据库事务在后端开发中占非常重要的地位,如何确保数据读取的正确性.安全性也是我们需要研究的问题.ACID首先总结一下数据库事务正确执行的四个要素(ACID): 原子性(At ...

  2. 依赖注入Unity框架

    依赖注入和控制反转是对同一件事情的不同描述,从某个方面讲,就是它们描述的角度不同.依赖注入是从应用程序的角度在描述,可以把依赖注入描述完整点:应用程序依赖容器创建并注入它所需要的外部资源:而控制反转是 ...

  3. web前端页面优化——个人见解

    web前端页面优化,我们从JavaScript.css.html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨. 一.  有关javascript方面 优化见解. 1. 首先举个例子: ...

  4. null和undifned的区别

    null和undifned的区别 1 从类型方面:null的类型是对象,undified的类型是undified. 2 从定义方面:null是一个表示"无"的对象,转为数值时为0: ...

  5. WCF（三）IIS寄宿

    WCF常用的一种使用方式是寄宿在IIS中. IIS寄宿操作流程如下: 1.创建IIS物理路径对应的文件夹,文件夹名称是WCFIIS. 2.在WCFIIS文件夹中添加文本文件,在文本文件中写入<% ...

  6. css3动画机制原理和实战

    这段时间喜欢上css3动画效果了,关于这个每个人都有不同的看法,在我个人看来css3在做一些小页面的动画效果还是很好用的,一些简单的小动画要是用js的话,未免浪费. 要是做大一点的话最好js+css3 ...

  7. 大数乘法 poj2389

    Bull Math Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14972   Accepted: 7695 Descri ...

  8. Java使用反射通过对象属性获取属性的值

    代码: // 通过属性获取传入对象的指定属性的值 public String getValueByPropName(Student student, String propName) { String ...

  9. 浅谈自底向上的Shell脚本编程及效率优化

    作者:沐星晨 出处:http://blog.csdn.net/sosodream/article/details/6276758 浅谈自底向上的Shell脚本编程及效率优化 小论文,大家多批评指导:) ...

  10. js正则表达式注册页面表单验证

    可以这样校验 <html> <head> <meta http-equiv="Content-Type" content="text/htm ...