最近有个老移动端项目
以前是从安卓外壳内弹出弹窗进行交互，现在需要更换外壳，可以使用H5尽量使用H5，因为这个弹窗又许多地方需要调用所以我写了一个公用js和css，只需要将其引入到页面即可直接调用，不需要增加新的dom，几乎兼容所有浏览器
下面是html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./tc.js" type="text/javascript"></script>
<link rel="stylesheet" href="./tc.css">
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<button onclick="openMyPopup()">弹窗</button>
<script>
function MyPopupSure(user,pow) {
console.log(‘我是确定按钮‘)
console.log(user,pow)
return true // 操作成功true关闭弹窗/失败false弹窗不关闭
}
</script>
</body>
</html>
下面是js内容
下面是css内容
如果你也对原生感兴趣可以联系我呀QQ283254340，上面代码有不妥的也可以给我发邮件，共同学习
下面是js内容
// 此插件的使用方法
// openMyPopup()打开弹窗
// 点击取消可直接关闭弹窗，也可调用MyPopupClose()函数，该函数return false不关闭弹窗，true关闭弹窗
// 确认按钮调用MyPopupSure()函数，该函数有两个参数user和pow，该函数return false不关闭弹窗，true关闭弹窗
window.onload = function () {
var html = ‘<div class="MyPopup"><div class="disflex tabBox"><div class="tab tabactive" data-index="0">员工账号</div><div class="tab" data-index="1">AD账号</div><div class="tab" data-index="2">统一账号</div></div><div style="margin-top: 15px;" class="disflex"><span>用户名：</span><input type="text" placeholder="请输入用户名" class="flexOne user"></div><div style="margin-top: 10px;" class="disflex"><span>密 码：</span><input type="text" placeholder="请输入密码" class="flexOne pow"></div><div class="disflex btnbox" style="margin-top: 20px;"><div class="btn" data-index="0">取消</div><div class="btn" data-index="1">确定</div></div></div>‘
var MyPopupBoxDom = document.createElement("div"); //创建一个div
MyPopupBoxDom.setAttribute(‘id‘,‘MyPopup‘) // 给div绑定id值
document.querySelector(‘body‘).appendChild(MyPopupBoxDom) // 将上边新建的div添加到body内
document.querySelector(‘#MyPopup‘).innerHTML = html // 将新增加的div内增加弹窗dom字符串
var MyPopup_index = 0
document.querySelector(‘#MyPopup .tabBox‘).addEventListener(‘click‘,function(ev) { // 绑定tab事件
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
var MyPopup_Newindex = target.getAttribute(‘data-index‘)
var tablist = document.querySelectorAll(‘#MyPopup .tabBox .tab‘)
if(MyPopup_Newindex == MyPopup_index ) {
return
}else{
MyPopup_index = MyPopup_Newindex
}
for(var a =0;a<tablist.length;a++) {
tablist[a].classList.remove(‘tabactive‘)
}
if(target.classList.contains(‘tab‘)) {
document.querySelector(‘#MyPopup .user‘).value = ‘‘
document.querySelector(‘#MyPopup .pow‘).value = ‘‘
tablist[target.getAttribute(‘data-index‘)].classList.add(‘tabactive‘)
}
})
document.querySelector(‘#MyPopup‘).addEventListener(‘click‘,function(ev) { // 绑定tab事件
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.getAttribute(‘id‘) == ‘MyPopup‘) {
document.querySelector(‘#MyPopup‘).style.display = ‘none‘
}
})
document.querySelector(‘#MyPopup .btnbox‘).addEventListener(‘click‘,function(ev) { // 绑定底部确认取消按钮事件
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
var tablist = document.querySelectorAll(‘#MyPopup .btnbox .btn‘)
if(target.classList.contains(‘btn‘)) {
var btnNum = target.getAttribute(‘data-index‘)
if(btnNum == 0) {
try{ // 可以添加自定义取消事件
if(MyPopupClose()) {
clearMyPopup_input()
}else{
console.log(‘不关闭弹窗‘)
}
}catch(err){
clearMyPopup_input()
}
}else{
var user = document.querySelector(‘#MyPopup .user‘).value
var pow = document.querySelector(‘#MyPopup .pow‘).value
if(MyPopupSure(user,pow)) { // 将用户名及密码给到确认按钮函数/函数返回true操作成功关闭弹窗/失败或不需要关闭弹窗反false
clearMyPopup_input()
}else{
console.log(‘不关闭弹窗‘)
}
}
}
})
function clearMyPopup_input() { // 清空弹窗并关闭弹窗
document.querySelector(‘#MyPopup .user‘).value = ‘‘
document.querySelector(‘#MyPopup .pow‘).value = ‘‘
document.querySelector(‘#MyPopup‘).style.display = ‘none‘
}
}
function openMyPopup() { // 外部调用打开弹窗
document.querySelector(‘#MyPopup‘).style.display = ‘block‘
}
下面是css内容
#MyPopup {
width: 100%;
height: 100%;
position: fixed;
background-color:rgba(0, 0, 0,0.4);
text-align: center;
top: 0;
display: none;
z-index: 999;
}
#MyPopup .MyPopup {
position: absolute;
width: 80%;
border-radius: 5px;
background-color: #fff;
/* height: 300px; */
top: 150px;
left: 10%;
padding: 20px;
box-sizing: border-box;
}
#MyPopup .disflex {
display: flex;
}
#MyPopup .flexOne {
flex: 1;
}
#MyPopup .tabBox .tab{
padding: 0px 0 5px 0;
color: blue;
}
#MyPopup .disflex .tabactive {
border-bottom: 2px solid blue;
}
#MyPopup span {
display: inline-block;
width: 70px;
}
#MyPopup input {
padding: 5px 0;
}
#MyPopup .disflex .tab {
flex: 1;
}
#MyPopup .btnbox {
margin-top: 10px;
color: blue;
justify-content: space-around;
}
#MyPopup .disflex .btn {
border-radius: 5px;
border: 1px solid blue;
width: 30%;
}
#MyPopup .disflex .btn:nth-child(2) {
background-color: blue;
color: #fff;
}