应用htmlcssjs实现自定义弹窗效果

Posted 原易

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了应用htmlcssjs实现自定义弹窗效果相关的知识,希望对你有一定的参考价值。

html部分
首先要有一个触发事件的按钮
弹窗背景(一般是全屏的 z-index和backgroundcolor)
弹窗容器(header、body、footer)
值得一提的是我们一般都会给元素类名和id
id用来获取元素类用来设置样式
CSS部分
首先设置好相应的样式
通过animation xx 2s 配合@keyframes 来实现动画效果
javascript部分
// 获取弹窗元素 通过js控制css使它隐藏或显示
var modal = document.getElementById("simpleModal");

// 获取按钮元素
var modalBtn = document.getElementById("modalBtn");

// 获取关闭弹窗按钮元素
var closeBtn = document.getElementsByClassName(‘closeBtn‘)[0];

// 监听打开弹窗事件 值得一提的是监听命令和jQuery的on很相像
modalBtn.addEventListener("click",openModal);

// 监听关闭弹窗事件
closeBtn.addEventListener("click",closeModal);

// 监听window关闭弹窗 这里为了实现 点击弹窗外部实现关闭
window.addEventListener("click",outsiteClick);


// 弹窗事件
function openModal(){
modal.style.display = "block";
}

// 关闭弹窗
function closeModal(){
modal.style.display = "none";
}

// outsiteClick
function outsiteClick(e){
if (e.target == modal) {
modal.style.display = "none";
}
}

 





























以上是关于应用htmlcssjs实现自定义弹窗效果的主要内容,如果未能解决你的问题,请参考以下文章

OpenHarmony——ets自定义弹窗UI组件封装

通过div实现arcgis自定义infowindow

小程序开发—— 封装自定义弹窗组件

4-PropertyGrid绑定自定义弹窗

友盟自动更新的弹窗,如何实现自定义呢?android版本的。

avalonia实现自定义小弹窗