效果图：

源码：

　　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. c# TextBox

    1. text内容全选事件 textBox1.selectAll(); 2.失去与获取焦点事件 textox1.LostFocus += new EventHandler(txt_LostFocus) ...

  2. Python 对象初识

    # Demo1class Penson: animal = 'big mom' plant = 'flower' def __init__(self,name,age,sex,job): self.n ...

  3. Linq、延迟加载、直接加载

    1.集合常用扩展方法 Where.Max.Min.OrderBy. Select.//投影后的IEnumerable对象可以通过,AsQueryable转换数据类型 First.FirstOrDefa ...

  4. windows及git常用命令

    windows常用命令: 创建文件夹:md 文件夹名 创建空的文件:type nul>文件名 创建有内容文件:echo "内容">文件名 查看文件内容:type +文件 ...

  5. 在APP开发设计中，为什么APP开发公司要慎用左右横滑设计？

    移动端屏幕越来越大,但用户对内容量的要求也水涨船高.如何在有限的屏幕内透出更多的内容,是设计师们研究的重点. 常用的内容拓展设计有:Y 方向 List 滑动.Z 方向 3D Touch .入口式内容折 ...

  6. TP为什么这个if判断什么都不显示？

    既不显示aaa也不显示bbb这是为什么? <if condition="isset(session('name'))"> aaa <else /> bbb ...

  7. 页面定制CSS代码初探（五）：给每篇文章最后加上'<完>'

    前言 我刚写博客的时候,有几篇是手动在最后加了个<完> 今天在看别人CSS布局时,发现很多::before和::after标签,因为没学过CSS,从名字看大概是前边/后边 加上某个东西的意 ...

  8. 说说Shell在代码重构中的应用

    说说Shell在代码重构中的应用    出处信息 出处:http://blogread.cn/it/article/3426?f=wb 代码重构(Code refactoring)有时是很枯燥的,字符 ...

  9. 20130907.Git学习记录

    1.任何文件在Git内都只有三种状态: ①已提交(committed):已提交表示该文件已经被安全地保存在本地数据库中了: ②已修改(modified):已修改表示修改了某个文件,但还没有提交保存: ...

  10. 高级函数-case

    case函数 (适合区间,>,<判断)    case when 判断表达式 then         when 判断表达式 then         .....    end     s ...