应⽤html、css、js实现⾃定义弹窗效果HTMl部分
⾸先要有⼀个触发事件的按钮
弹窗背景（⼀般是全屏的 z-index和backgroundcolor）
弹窗容器（header、body、footer）
值得⼀提的是我们⼀般都会给元素类名和id
id⽤来获取元素类⽤来设置样式
CSS部分
⾸先设置好相应的样式
通过animation xx 2s 配合@keyframes 来实现动画效果
JavaScript部分
// 获取弹窗元素通过js控制css使它隐藏或显⽰
var modal = ElementById("simpleModal");
// 获取按钮元素
var modalBtn = ElementById("modalBtn");
// 获取关闭弹窗按钮元素
var closeBtn = ElementsByClassName('closeBtn')[0];
// 监听打开弹窗事件值得⼀提的是监听命令和jQuery的on很相像
modalBtn.addEventListener("click",openModal);
// 监听关闭弹窗事件
closeBtn.addEventListener("click",closeModal);
// 监听window关闭弹窗这⾥为了实现点击弹窗外部实现关闭
window.addEventListener("click",outsiteClick);
/
/ 弹窗事件
function openModal(){
modal.style.display = "block";
}
css和html和js怎么结合// 关闭弹窗
function closeModal(){
modal.style.display = "none";
}
// outsiteClick
function outsiteClick(e){
if (e.target == modal) {
modal.style.display = "none";
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。