# JokerBox-popUp 弹窗框架
*开源技术栏*
前端弹窗框架 ”小丑盒“ 系列 JS（JavaScript）前端 组件，文章详细描述了有关 弹窗 工具 的使用！
## 目录
[TOC]
# JokerBox-popUp
小丑盒 弹窗 JS 工具包，此工具是一个小巧的插件包，能够实现在前端页面中的弹窗展示。Joker Box Pop up JS Toolkit, this tool is
a compact plugin package that can achieve pop-up display on front-end pages.
> 仓库地址：https://github.com/BeardedManZhao/JokerBox-popUp.git
## 使用示例
此工具非常小巧，您只需要直接将`joker_box_pop_up.js` 以及 `joker_box_pop_up.css` 引入到您的页面中即可，下面是一个示例！
### 简单使用示例
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pop_up</title>
</head>
<body id="b">
<p>这里是原本的网页内容</p>
</body>
<!-- 在下面直接进行引用即可！ -->
<link href="css/joker_box_pop_up.css" rel="stylesheet">
<script src="./js/joker_box_pop_up.js"></script>
<script>
window.onload = () => {
// 创建弹窗 传递一个元素进去
const pop_up = new JokerBox_popUp(document.getElementById("b"));
// 显示弹窗 在这里代表显示 10000 毫秒
pop_up.show("这里是弹窗内容", 10000)
}
</script>
</html>
```
### 设置样式的使用示例
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pop_up</title>
</head>
<body id="b">
<p>这里是原本的网页内容</p>
</body>
<!-- 在下面直接进行引用即可！ -->
<link href="css/joker_box_pop_up.css" rel="stylesheet">
<script src="./js/joker_box_pop_up.js"></script>
<script>
window.onload = () => {
// 创建弹窗 传递一个元素进去
const pop_up = new JokerBox_popUp(
document.getElementById("b"),
// 在构造函数的第二个参数可以传递一些样式 TODO 当然 您也可以直接使用 CSS 选择器直接修改样式
{
// 背景样式
background: "url('https://www.lingyuzhao.top/image/graphic-loading1.jpg')",
// 字体颜色样式
color: '#fff'
}
);
// 显示弹窗 在这里代表显示 10000 毫秒
pop_up.show("这里是弹窗内容", 10000)
}
</script>
</html>
```
### 测试界面
您可以访问 [小丑盒弹窗 测试工具](https://www.lingyuzhao.top/js/lib/joker_box_pop_up/Test.html) 来进行在线测试！这是个简单的测试界面，您可以在此处进行测试！
<iframe src='https://www.lingyuzhao.top/js/lib/joker_box_pop_up/Test.html' style='width:100%'/>
------
***操作记录***
作者：[root](https://www.lingyuzhao.top//index.html?search=1 "root")
操作时间：2024-03-18 14:42:04 星期一
事件描述备注：保存/发布
中国 天津
[](如果不需要此记录可以手动删除，每次保存都会自动的追加记录)
