效果图：

源码：

　　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. javascript前端如何使用google-protobuf

    1.首先下载google的protobuf的compiler,通过编译器可以将.proto文件转换为想要的语言文件. 下载地址:https://repo1.maven.org/maven2/com/g ...

  2. springmvc生成注册验证码

    通过SPRing MVC为系统添加验证码 1:布局登陆页面,用户名,密码,填写验证码的文本框,及验证码的图片及点击换图 <%@ taglib prefix="c" uri=& ...

  3. HTML5音频可视化频谱跳动代码

    今天学习到用canvas来写  HTML5音频可视化频谱跳动代码  将代码在此做一总结: <!DOCTYPE html> <html lang="en"> ...

  4. CSS3中的2D和3D转换知识介绍

    一  2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...

  5. mysql面试几个问题

    1.为什么InnoDB表最好要有自增列做主键? InnoDB引擎表是基于B+树的索引组织表(IOT) 关于B+树 (图片来源于网上) B+ 树的特点: a.所有关键字都出现在叶子结点的链表中(稠密索引 ...

  6. ZBrush中物体的显示与隐藏

    在ZBrush®中除了遮罩功能可以对局部网格进行编辑外,通过显示和隐藏局部网格也可以对局部进行控制.选择网格的控制都是手动操作,在软件中并没有相应的命令进行操作.选择局部网格的工作原理也很简单,即被选 ...

  7. laydate日期范围控制

    1.html <input type="text" id="startTime" name="startTime" class=&qu ...

  8. 在用HTML+css写页面中遇到的问题

    一.清除浮动. (1)verflow:hidden;这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会 ...

  9. bootstrap fileinput控件 + django后台上传、回显简单使用

    一.控件下载:https://github.com/kartik-v/bootstrap-fileinput/ 官网:http://plugins.krajee.com/file-input 需要引入 ...

  10. laravel 知识点总结

    1.eloquent 关系理解: https://lvwenhan.com/laravel/423.html