soft

soft

JS实现confirm相似功能

        在开发中,有些场景需要confirm来让用户选择执行,系统内置的confirm方法界面稍嫌简陋,用layer是一个方法,但有少数情况下,layer的也不能弹出想要的效果,那就自己动手,丰衣足食吧!

        先要用到jquery库,有些操作更方便,有兴趣的同学也可以用原生去做相应的操作

     myconfirm.js

	var g_confirm_yes,g_confirm_no;
	var style = document.createElement("style");
	style.type = "text/css";
	try{
	  style.appendChild(document.createTextNode(".fdwin{position:fixed;width:100%;height:100%;top:-200%;z-index:200;background:rgba(0,0,0,0.2);display: none;}"));
		style.appendChild(document.createTextNode(".fdwinc{position:fixed;width: 18rem; height: 12rem;top: calc(50% - 85px);left: calc(50% - 160px);border:1px solid #ccc;background:#fff;box-shadow: 1px 1px 50px rgba(0,0,0,.3);overflow:hidden;}"));
		style.appendChild(document.createTextNode(".fdtitle{width:auto;padding:0 15px;background:#F8F8F8;overflow:hidden;}"));
		style.appendChild(document.createTextNode(".fdtitle b{display:inline-block;float:left;font-size:0.5rem;line-height:35px;font-weight:normal;color:#ff6600;}"));
		style.appendChild(document.createTextNode(".fdtitle span{display:inline-block;float:right;cursor:pointer;}"));
		style.appendChild(document.createTextNode(".fdtitle span:after{display:inline-block;content:'\e66b';font-family: 'iconfont' !important;line-height:35px;font-size:0.5rem;color:#000;}"));
		style.appendChild(document.createTextNode(".fdtitle span:hover:after{color:#ff6600;}"));
		style.appendChild(document.createTextNode(".fdcontent{overflow:hidden; position:relative;}"));
		style.appendChild(document.createTextNode(".fdcontent img{width:100%;}"));
		style.appendChild(document.createTextNode(".fdcontent p{padding: 20px 15px; text-align: left; font-size: 0.85rem;}"));
		style.appendChild(document.createTextNode(".fdfoot{position: absolute;    bottom: 0;    border-top: 1px solid #cccccc;    width: 100%;    overflow: hidden;background:#f5f5f5;}"));
		style.appendChild(document.createTextNode(".fdfoot a{display: inline-block;  width: 50%;  font-size: 0.85rem;  line-height:45px;cursor:pointer;   text-align: center;}"));
		style.appendChild(document.createTextNode(".fdfoot a:hover{color:#ff6600}"));	
	}catch(ex){
	  style.styleSheet.cssText = "body{background-color:red}";//针对IE
	}
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(style);
	
	var div=document.createElement("div");
	div.id="id_fdwin";	
	div.className="fdwin";
	document.body.appendChild(div);
	document.getElementById("id_fdwin").innerHTML="<div class='fdwinc'><div class='fdtitle'><b id='ptshtips'>提示</b></div><div class='fdcontent'><p id='ptshtext'></p></div><div class='fdfoot' ><a id='btn_yes' onclick='phidewin_yes()'> 确定</a><a id='btn_no' onClick='phidewin_no()'>取消</a></div></div>";

	function IsPC() {
		var userAgentInfo = navigator.userAgent;
		var Agents = ["Android", "iPhone",
					"SymbianOS", "Windows Phone",
					"iPad", "iPod"];
		var flag = true;
		for (var v = 0; v < Agents.length; v++) {
			if (userAgentInfo.indexOf(Agents[v]) > 0) {
				flag = false;
				break;
			}
		}
		return flag;
	}

	function pshowwin(titps,title,func_yes,func_no)
	{
		
		$(".fdwin").show();
		$(".fdwin").stop().animate({top:'0'},100);	
		document.getElementById("ptshtips").innerHTML=titps;	
		document.getElementById("ptshtext").innerHTML=title;	
		g_confirm_yes=func_yes;
		g_confirm_no=func_no;
		
	 
	}
	function phidewin_no()
	{   $(".fdwin").hide();
		$(".fdwin").stop().animate({top:'-200%'},100);
		 //no  todo
		 //alert("no");	
		g_confirm_no();		
				 
	}

	function phidewin_yes()
	{
		$(".fdwin").hide();
		$(".fdwin").stop().animate({top:'-200%'},100);
		  //yes todo		
		g_confirm_yes();		
		
	 
	}


    调用方法:

     pshowwin('you tips','you title',function(){alert('this form yes callback')},function(){});


  观看:演示效果

        

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

联系我 331434376    15629529961