在开发中,有些场景需要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(){});
观看:演示效果