原生js如何创建弹出层

我们会经常遇到需要点击按钮出现弹出层的情况，弹出层和弹窗是不一样的。下面就来讲讲我的创建弹出层的方法。

首先，创建一个按钮，为按钮绑定事件，点击按钮，打开弹出层。

<button id = "btn">打开</button>
<script>var btn = document.getElementById('btn');btn.onclick = function(){openlayer();
}

接着构造函数，动态创建弹出层。

function openNew() {//创建遮罩层div并插入bodyvar oMask = document.createElement("div");oMask.id = "mask";document.body.appendChild(oMask);var olayer = document.createElement("div");olayer.id = "layer";olayer.innerHTML = "<div class='content'><div id='close'></div></div>"document.body.appendChild(olayer);var oClose = document.getElementById("close");oMask.onclick = oClose.onclick = function () {document.body.removeChild(oMask);document.body.removeChild(olayer);}}

设置样式如下：

       * {margin: 0;padding: 0;}#mask {background: #000;opacity: 0.75;filter: alpha(opacity=75);height: 100%;width: 100%;position: absolute;left: 0;top: 0;z-index: 1000;}#layer {position: fixed;left: 30%;top: 30%;z-index: 1001;}.content{width: 670px;height: 380px;background: rgb(25, 172, 12);border: 5px solid black;}#close {width: 20px;height: 20px;background: rgb(154, 2, 255);cursor: pointer;position: absolute;right: 10px;top: 10px;}#btn {width: 80px;height: 40px;background: #F01400;margin: 0 auto;display: block;cursor: pointer;border-style: none;color: #fff;font-size: 16px;}

实现效果如下：

但是这样动态添加html元素并不是很方便的事儿。

原生js如何创建弹出层相关推荐

原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
html中利用js写一个弹出注册框,原生js实现一个弹出框
其实弹出框的实现非常的简单.网上有很多种类的弹出框,比如jquery ui 的dialog colorbox fancybox等.jquery ui的dialog是一个专业的对话框而colorbox ...
分享123个JS特效弹出层，总有一款适合您
分享123个JS特效弹出层,总有一款适合您 123个JS特效弹出层下载链接:https://pan.baidu.com/s/1mH0heedscCrBmft_zOjjwA?pwd=n4eo 提取码: ...
非常漂亮的仿腾讯弹出层效果
2019独角兽企业重金招聘Python工程师标准>>> 非常漂亮的仿腾讯弹出层效果 http://www.jscode.cn/js/v45300 jquery弹出层插件-jquery ...
Layer弹出层关闭后刷新父页面
一.Layer弹出层关闭后刷新父页面 //编辑 $("#edit").on("click", function(){var id = getIdSelectio ...
php提交表单关闭弹出层,使用js实现关闭js弹出层的窗口
本篇文章主要是对使用js实现关闭js弹出层的窗口的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 function toggle() { theObj = document.getE ...
js插件---弹出层sweetalert2
一.总结 sweetalert2的窗口美观,移动端适配也比较好,易学易用,是一款简单便捷的组件,值得学习! SweetAlert2和SweetAlert的区别? SweetAlert2是SweetAl ...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
JQuery版本:1.7.1: 编写一个JS类(ck.layer.js): [javascript] view plaincopy /********************************* ...
html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...

原生js如何创建弹出层

原生js如何创建弹出层相关推荐

最新文章

热门文章