css
/*===========================================弹出表单式弹窗*/
.popur-bg{/*渐变背景*/
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,.2);
transition: all 0.4s ease-in-out 0s;
display: flex;
justify-content: center;
align-items: center;
}
.popur-bg:hover{
background:rgba(0,0,0,.4);
}
.popur-form{/*表框外形*/
width:80%;
height:70%;
background:#fff;
display: flex;
flex-flow:column nowrap;
align-items:center;
justify-content: space-between;
}
.popur-form:hover {/*表框外形*/
box-sizing: inherit;
}
.popur-form-m{
max-height:70%;
}
.popur-form-sm{
min-height:150px;
}
.popur-form-lg{
width:100%;
height:100%;
}
.popur-form-lg .popur-form-body{
max-height:80% !important;
}
.popur-form-title{
line-height:40px;
font-size:18px;
width:80%;
text-align:center;
border-bottom:1px solid #2ABBAE;
margin-bottom:10px;
}
.popur-form-body{
width:100%;
max-height:70%;
display:flex;
flex-grow:2;
flex-flow: column nowrap;
align-items: center;
overflow-y:auto;
}
.popur-form-body p{
color:#999;
}
.p-f-b-tr{
width:80%;
display:flex;
flex-flow: column nowrap;
flex:none;
}
.p-f-b-tr > p{
width: 100%;
text-align: center;
margin: 3px 0;
display:flex;
align-items:center;
font-size:0.6em;
}
.p-f-b-tr > :not(p){
width:100%;
}
.p-f-b-tr [type=text],.p-f-b-tr [type=number]{
border:none;
border-bottom:1px solid #838da5;
}
.popur-form-footer{
margin:10px 0;
width:100%;
display:flex;
justify-content:space-around;
flex-shrink:0
}
js
/*===========================================通用弹窗-表单型(需要printf)*/
/*var trans={"t_id":["系统ID","text"],
"t_loginname":["用户名","input"],
"t_password":["密码","input"],
"t_name":["姓名","input"],
"t_tel":["手机号码","input"],
"t_email":["E-mail","input"],
"t_status":["账号状态","switch"],
"t_note":["Note","input"],
"t_last_login_time":["上次登陆时间","text"],
"t_login_ip":["IP","text"]
};
var Jalert_body_str="";
var Jalert_body=datacache.map(function(e,index){
if(e['t_id']==itid){
for(var value in trans){
var filter = (e[value]==null)?"":e[value];
Jalert_body_str+=Jtable_td(trans[value][1],trans[value][0],value,filter,roleSelectArr);
}
}
});
var Jalert_footer=
"<button type='button' class='xbtn xbtn-white' onclick='Jalert_close(this)'>"+
"关闭"+
"</button>";
$("body").append(Jalert('详情',Jalert_body_str,Jalert_footer,'m'));
* */
var pupur_str=("<div class='popur-bg'>"+
"<div class='popur-form popur-form-{3}'>"+
"<div class='popur-form-title'>{0}</div>"+
"<div class='popur-form-body'>"+
"{1}"+
"</div>"+
"<div class='popur-form-footer'>"+
"{2}"+
"</div>"+
"</div>"+
"</div>");
function Jalert(tit,body,foot,type){
type=(typeof(type)=="undefined")?"m":type;
return printf(pupur_str,tit,body,foot,type);
}
function Jalert_close(even){
$(".popur-bg").remove();
$("body").css("overflow","auto");
}
function BodyNoScoller(){
document.querySelector('.popur-bg').addEventListener('touchmove',function(e){
document.body.style.overflow = 'hidden';
},false);
}
/*===========================================表格内容生成*/
function Jtable_td(type,title,envalue,value,addition){
var con;
var value=(value==""||value==null||typeof(value)=="undefined")?" ":value;
switch (type){
case "select":
con="<div class='p-f-b-tr'>"+
"<p>"+title+"</p>"+
"<select name='"+envalue+"' class='"+envalue+"'>";
for(var jvalue in addition){
con+=("<option rowx_index='"+jvalue+"' "+
((addition[jvalue]==envalue)?"selected":"")+">"+
addition[jvalue]+
"</option>");
}
con+="</select></div>"
break;
case "input":
con="<div class='p-f-b-tr'>"+
"<p>"+title+"</p>"+
"<input type='text' name='"+envalue+"' class='"+envalue+"' value='"+value+"'></div>";
break;
case "number":
con="<div class='p-f-b-tr'>"+
"<p>"+title+"</p>"+
"<input type='number' name='"+envalue+"' class='"+envalue+"' value='"+value+"'></div>";
break;
case "textarea":
con="<div class='p-f-b-tr'>"+
"<p>"+title+"</p>"+
"<textarea class='"+envalue+"' name='"+envalue+"' value='"+value+"'></textarea></div>";
break;
case "switch":
value=(value=="")?"1":value;
con="<div class='p-f-b-tr'>"+
"<p>"+title+"</p>"+
"<p>"+
"<button class='switch "+((value==1)?"switch-on":"")+" "+envalue+"' statu='"+value+"' onclick='switch_change(this)'>"+
"<i class='switch-btn'></i><p>"+((value==1)?"正常":"关闭")+"</p>"+
"</button></p></div>"
break;
default:
con="<div class='p-f-b-tr'>"+
"<p>"+title+"</p>"+
"<span class='"+envalue+"' name='"+envalue+"'>"+value+"</span></div>"
break;
}
return con;
};
/*===========================================简单实现printf功能*/
function printf() {
var num = arguments.length;
var oStr = arguments[0];
for (var i = 1; i < num; i++) {
var pattern = "\\{" + (i-1) + "\\}";
var re = new RegExp(pattern, "g");
oStr = oStr.replace(re, arguments[i]);
}
return oStr;
}