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 相关文章推荐
仿微博字符限制效果实现代码
Apr 20 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
javascript实现放大镜功能
Dec 09 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
给多个地址发邮件的类
2006/10/09 PHP
基于mysql的论坛(2)
2006/10/09 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python实现三维拟合的方法
2018/12/29 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
长安大学毕业生自我鉴定
2014/01/17 职场文书
会计岗位描述
2014/02/22 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
学习保证书范文
2014/04/30 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
企业年度评优方案
2014/06/02 职场文书
服装设计师求职信
2014/06/04 职场文书
租房协议书范文
2014/08/20 职场文书
就业证明函
2015/06/17 职场文书
入团申请书格式
2019/06/20 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
浅谈克隆 JavaScript
2021/11/02 Javascript
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android