javascript+html5+css3自定义弹出窗口效果


Posted in Javascript onOctober 26, 2017

本文实例为大家分享了js自定义弹出窗口效果展示的具体代码,供大家参考,具体内容如下

效果图:

javascript+html5+css3自定义弹出窗口效果

源码:

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";
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
vant 中van-list的用法说明
Nov 11 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 #Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 #Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 #Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 #Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 #Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 #Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 #Javascript
You might like
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP面向对象精要总结
2014/11/07 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
html超链接打开窗口大小的方法
2013/03/05 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
angularJS 入门基础
2015/02/09 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
简单介绍Python中的floor()方法
2015/05/15 Python
Python中的super用法详解
2015/05/28 Python
python实现简单爬虫功能的示例
2016/10/24 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
python3将变量输入的简单实例
2020/08/19 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
python 实现的车牌识别项目
2021/01/25 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
十佳教师事迹材料
2014/01/11 职场文书
小学生通知书评语
2014/12/31 职场文书
收银员岗位职责
2015/02/03 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
致运动员赞词
2015/07/22 职场文书