欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 20:58:16
本文实例为大家分享了js自定义弹出窗口效果展示的具体代码,供大家参考,具体内容如下 效果图: 源码: 1.demo.jsp <%@ page co...

本文实例为大家分享了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";
};

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