效果图：

源码：

　　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. POJ 1543 暴搜

    题意:输出a^3=b^3+c^3+d^3的所有a,b,c,d的值. b,c,d由小到大且b,c,d都大于1. 思路: 按照题意写就好.... // by SiriusRen #include < ...

  2. 在Ubuntu Server下搭建LAMP环境

    1 LAMP的安装 LAMP通常是指Linux+Apache+MySQL+PHP组合形成的一套可以运行PHP程序的体系,并不是一个软件的名称.没有安装MySQL的服务器依然可以在其它条件完备的情况下运 ...

  3. MySQL高级查询和编程基础

    第一章 数据库设计 一.数据需求分析: 数据需求分析是为后续概念设计和逻辑结构设计做准备. 结构:(1)对现实世界要处理的对象进行详细的调查. (2)收集基础数.据. (3)对所收集的数据进行处理. ...

  4. SQL 学习——简序以及学习路线

    1.最近发现自己除去简单的SQL语句好像其他的并不怎么懂哎,虽然暂时是android用不到太复杂点的语句,想来总不能一直这样把, 顺带还是看看Sql. 2.画个图规划下自己的学习路线

  5. Git 版本控制原理

    git 工作原理图 如上图所示,有三个区域Working Directory.stage.master. 名词解释: 工作区(Working Directory) 在我们直接编辑文件(文件夹)的根目录 ...

  6. codeforces 277 A Learning Languages 【DFS 】

    n个人,每个人会一些语言,两个人只要有会一门相同的语言就可以交流,问为了让这n个人都交流,至少还得学多少门语言 先根据n个人之间他们会的语言,建边 再dfs找出有多少个联通块ans,再加ans-1条边 ...

  7. Unity 导入的模型检测不到碰撞

    解决方案 添加Mesh Collider和rigidbody,并且Collider里边2个勾要勾上. 这是我碰到的问题.如果没解决你的问题,别打我,逃~

  8. ajax中遇到无法发送的问题，以及收不到返回信息的问题

    1.在做ajax时,数据发送成功,后台确认了也返回了信息,但是怎么都在success里面接收不了,我遇见的造成的原因时因为dataType返回值类型错误造成的原因. var url = "请 ...

  9. fflush()函数总结

    1. 概述 函数名: fflush() 功 能: 清除读写缓冲区,需要立即把输出缓冲区的数据进行物理写入时 头文件: stdio.h 原型: int fflush(FILE *stream),其中st ...

  10. CentOS安装记录

    决定开始复习Linux系统编程,这次我不再折腾Linux下的各种工具,直接使用VS2017进行代码编写与调试. 配置项 值 VM VMware® Workstation 15 Pro OS CentO ...