登录  /  注册
首页 > web前端 > js教程 > 正文

JS+H5+C3实现弹出窗口

php中世界最好的语言
发布: 2018-04-16 15:08:35
原创
4503人浏览过

这次给大家带来JS+H5+C3实现弹出窗口,JS+H5+C3实现弹出窗口的注意事项有哪些,下面就是实战案例,一起来看一下。

源码:

1.demo.jsp



  <title>自定义弹出窗口</title>
  <script></script>
  <style>
    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>
    function openWindow() {
      new MyLayer({
        top:"10%",
        left:"10%",
        width:"80%",
        height:"80%",
        title:"我的标题",
        content:"操作成功"
      }).openLayer();
    }
  </script>
  <button>打开弹窗</button>

 
登录后复制

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("p");
  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("p");
  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 p_toolBar = document.createElement("p");
  p_toolBar.style.textAlign = "right";
  p_toolBar.style.paddingTop = "10px" ;
  p_toolBar.style.backgroundColor = "aliceblue";
  p_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);
  p_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);
  p_toolBar.appendChild(span_close);
  open_layer.appendChild(p_toolBar);
  var p_content = document.createElement("p");
  p_content.style.textAlign = "center";
  var content_area = document.createTextNode(this.options.content === undefined ? "" : this.options.content);
  p_content.appendChild(content_area);
  open_layer.appendChild(p_content);
  document.body.appendChild(open_layer);
  document.body.appendChild(background_layer);
  open_layer.style.display = "block" ;
  background_layer.style.display = "block";
};
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

解决vue-cli的打包图片路径错误

正则的使用案例及基本语法

JS中typeof和类型判断(附代码)

以上就是JS+H5+C3实现弹出窗口的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号