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 js cookie的存储,获取和删除
Dec 29 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
Javascript文本框脚本实现方法解析
Oct 30 Javascript
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编程最快明白》第三讲:php数组
2010/11/01 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
Web开发之JavaScript
2012/03/29 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
python的id()函数介绍
2013/02/10 Python
python如何查看系统网络流量的信息
2016/09/12 Python
Python的标准模块包json详解
2017/03/13 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
物业经理自我鉴定
2014/03/03 职场文书
销售会计岗位职责
2014/03/15 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
日语专业求职信
2014/07/04 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
宾馆安全管理制度
2015/08/06 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
Python PIL按比例裁剪图片
2022/05/11 Python