效果图：

源码：

　　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. centos + nodejs + egg2.x 开发微信分享功能

    本文章发到掘金上,请移步阅读: https://juejin.im/post/5cf10b02e51d45778f076ccd

  2. Python笔记（三）

    # -*- coding:utf-8 -*- # 运算符 a,b=10,20 # 算术运算符:包括+.-.*./.%.**.//运算 print "********************1 ...

  3. 三种启动SQLSERVER服务的方法（启动sqlserver服务器，先要启动sqlserver服务）

    1.后台启动 计算机-管理-服务和应用程序 2.SQL SERVER配置管理器 3.在运行窗口中使用命令进行启动:

  4. 构建工具系列二--Grunt

    本文地址: http://www.cnblogs.com/blackmanba/p/frontend-scaffold-grunt.html或者http://forkme.info/frontend- ...

  5. CSS实现栅格布局

    CSS实现栅格布局 设置容器container: .grid-container { width: 100%; max-width: 1200px; } 清除浮动: .row:before, .row ...

  6. C#实现软件监控外部程序运行状态的方法

    本文实例讲述了C#实现软件监控外部程序运行状态的方法.分享给大家供大家参考.具体方法如下: 需要外挂一个程序,用于监控另一个程序运行状态,一旦检测到另一程序关闭,就触发一个事件做其他处理. using ...

  7. 粘包_Client

    # from socket import *# import time# ip_port = ('127.0.0.1',8080)# back_log = 5# buffer_size = 1024# ...

  8. Iterator与Asyc/Await的实现

    https://wanago.io/2018/04/23/demystifying-generators-implementing-async-await/

  9. C语言基本语法——指针

    1.什么是指针 2.指针用于参数 3.指针用于返回值 4.指针加减操作 5.指针与数组区别 1.什么是指针 • 内存被分为字节,每个字节有唯一的地址,指针指的就是内存地址. • 保存指针的变量,就叫指 ...

  10. HTML特殊符号对照表、常用的字符实体

    来源:http://tool.xker.com/htmlchar.php 最常用的字符实体 显示结果 描述 实体名称 实体编号   空格     < 小于号 < < > 大于号 ...