爱站程序员基地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.点击按钮 弹出 再点击 就删除按钮了
