图标弹窗代码

图标弹窗代码

可以放在移动菜单栏html自定义代码位置试试

引用了阿里图标//

  • Symbol
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图标弹窗示例</title>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<style>
/* 模态框基本样式 */
.modal {
display: none; /* 默认隐藏 */
position: fixed; /* 固定定位 */
z-index: 1; /* 置于顶层 */
left: 0;
top: 0;
width: 100%; /* 宽度占满整个视窗 */
height: 100%; /* 高度占满整个视窗 */
overflow: auto; /* 超出视窗部分可滚动 */
background-color: rgb(0,0,0); /* 背景颜色 */
background-color: rgba(0,0,0,0.4); /* 黑色w/a */
}

/* 模态框内容样式 */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% 从顶部和水平居中 */
padding: 20px;
border: 1px solid #888;
width: 80%; /* 内容宽度 */
}

/* 关闭按钮样式 */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>

<!-- 触发弹窗的图标按钮 -->
<button id="iconBtn">

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-shouyedibudaohang_huaban1"></use>
</svg>
</button>

<!-- 模态框 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>这是一个弹窗!</p>
</div>
</div>

<script>
// 获取元素
var iconBtn = document.getElementById("iconBtn");
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];

// 当用户点击图标按钮时打开模态框
iconBtn.onclick = function() {
modal.style.display = "block";
}

// 当用户点击关闭按钮时关闭模态框
span.onclick = function() {
modal.style.display = "none";
}

// 当用户点击模态框之外的地方时也可以关闭模态框
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script src="./引用图标专用/iconfont.js"></script>
</body>
</html>
温馨提示:本文最后更新于2024-05-12 21:55:32,某些文章具有时效性,若有错误或已失效,请在下方留言
© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容