爱梦小屋

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;
}