您的位置：首页 > Web前端 > JQuery

js+html+css+jquery实现简单的弹框

2020-06-08 05:23 585 查看

css代码

#divcss5 {
margin: 0 auto;
width: 300px;
position: relative;
top: 4%;
}

#home {
width: 300px;
height: 150px;
cursor: pointer;
border: 1px solid ghostwhite;
position: fixed;
margin: 0 auto;
background-color: mistyrose;
}

.tips {
line-height: 24px;
background-color: gainsboro;
}

.dataTxt {
text-align: center;
height: 80px;
width: 100%;
position: relative;
}

.hand {
cursor: pointer
}

js代码

a();
function a() {
create_temp(null, '哈哈哈', null)
}

// 点击开启弹框 设置参数
function btn(obj) {
let title = "弹框自定义纯js/html";
let _this = $(obj);
// 创建模板 看自己需求传参 1当前元素指向this 2 提示的内容 3 方法
create_temp(_this, title, del);
}

// 定义方法的全局变量
let funData = null;
// 定义指向的全局变量
let _this = null;

// 创建dom模板
function create_temp(obj, data, fun) {
if (obj !== null) {
_this = $(obj);
}
let temp = "<div id=\"home\">\n" +
"<div class='tips'><span style=\"float: left\">提示</span>" +
"<span class='hand' style=\"position: relative;left: 83%;\" οnclick='btnNo()'>X</span></div>\n" +
"<hr style=\"position: relative;top: -8px;\"/>\n" +
"<div class='dataTxt'>" + data + "</div>\n" +
"<div style=\"text-align: center\">";
if (fun !== null && fun !== '') {
funData = fun;
temp += "<button id='btnYes' class='hand' οnclick='funData(_this)'>确认</button>\n" +
"<button id='btnNo' class='hand' οnclick='btnNo()'>取消</button>\n" +
"</div>\n" +
"</div>";
} else {
temp += "<button id='btnYes' class='hand'>确认</button>\n" +
"<button id='btnNo' class='hand' οnclick='btnNo()'>取消</button>\n" +
"</div>\n" +
"</div>";
}
document.getElementById("bo").innerHTML = temp;
}

// 删除当前按钮的方法
function del(temp) {
temp.parent().parent().remove();
$("#home").hide();
}

// 隐藏按钮
function btnNo() {
$("#home").hide();
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
</head>
<body style="height: 6000px">
<table>
<thead>
<tr>
<th>#</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" value="按钮" id="btn" onclick="btn(this)"/></td>
</tr>
</tbody>
</table>
<div id="divcss5">
<div id="bo">
</div>
</div>
</body>
</html>

演示
1.启动会先执行a()方法

2.点击按钮弹出再点击就删除按钮了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航