輕量級彈框 (修改後)
阿新 • • 發佈：2019-01-28
ffffff -c com head turn width length fff middle
這個是某一天隨便找的, 找了哪個前輩的(我也忘了 實在不好意思),後來改動了下 得到自己想要的
效果圖:
<!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Demo</title> <link rel="stylesheet" type="text/css" href="./xcConfirm.css"> <script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="./xcConfirm.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .sgBtn{width: 135px; height: 35px; line-height: 35px; margin-left: 10px; margin-top: 10px; text-align: center; background-color: #0095D9; color: #FFFFFF; float: left; border-radius: 5px;} </style> <script type="text/javascript"> $(function(){ $("#btn7").click(function(){ var txt= ‘<form action="" id="form2"><p style="height: 35px;font-size:12px;"><span> <font style="color:red;">*</font> 用戶名：</span> <input type="text" id="username" name="username" placeholder="填寫您的姓名" style="padding-left:5px;" /></p><p style="height: 35px;font-size:12px; margin:10px 0 0 0"><span> <font style="color:red">*</font> 手機號：</span> <input type="text" id="phone" name="tel" placeholder="填寫您的手機號" style="padding-left:5px;" /></p><p style="height: 35px;font-size:12px; margin:10px 0 0 0"><span> 公司名稱： </span><input type="text" id="gsname" name="gsname" placeholder="填寫您的公司名稱" style="padding-left:5px;" /></p><p style="height: 35px;font-size:12px; margin:10px 0 0 0"><span> <font style="color:red">*</font> 郵箱： </span><input type="text" id="email" name="email" placeholder="填寫您的郵箱" style="padding-left:5px;" /></p></form>‘; var option = { title: "首次體驗，請先註冊", btn: parseInt("0011",2), onOk: function(){ // 你的操作 } } window.wxc.xcConfirm(txt, "custom", option); }); }); </script> </head> <body> <div class="" style="height: 768px;"> <div class="sgBtn" id="btn7">彈窗ABC</div> </div> </body></html>
css
verticalAlign{vertical-align:middle;display:inline-block;height:100%;margin-left:-1px} .xcConfirm .xc_layer{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#666;opacity:.5;z-index:2147000000} .xcConfirm .popBox{position:fixed;left:50%;top:50%;background-color:#fff;z-index:2147000001;width:455px;height:340px;margin-left:-285px;margin-top:-150px;border-radius:5px;font-weight:200;color:#535e66} .xcConfirm .popBox .ttBox{height:30px;line-height:30px;padding:14px 30px;border-bottom:solid 1px #eef0f1；} .xcConfirm .popBox .ttBox .tt{font-size:18px;display:block;float:left;height:30px;position:relative;font-weight:500} .xcConfirm .popBox .ttBox .clsBtn{display:block;cursor:pointer;width:12px;height:12px;position:absolute;top:22px;right:30px;background:url(../img/icons.png) -48px -96px no-repeat} .xcConfirm .popBox .txtBox{margin:30px 40px 0px 30px;height:187px;width:390px;overflow:hidden;border:1px solid #EEF0F1;border-radius: 5px;} .xcConfirm .popBox .txtBox .bigIcon{float:left;margin-right:20px;width:48px;height:48px;background-image:url(../img/icons.png);background-repeat:no-repeat;background-position:48px 0} .xcConfirm .popBox .txtBox p{height:350px;margin-top:2px;line-height:26px;} /*overflow-x:hidden;*/ .xcConfirm .popBox .txtBox p input{width:285px;height:30px;border:solid 1px #eef0f1;font-size:12px;margin-top:6px;color:#8e8e8e} /*.xcConfirm .popBox .btnArea{border-top:solid 1px #eef0f1}*/ .xcConfirm .popBox .btnGroup{float:right} .xcConfirm .popBox .btnGroup .sgBtn{margin-top:14px;margin-right:10px} .xcConfirm .popBox .sgBtn{display:block;cursor:pointer;float:left;width:95px;height:35px;line-height:35px;text-align:center;color:#fff;border-radius:5px} .xcConfirm .popBox .sgBtn.ok{background-color:#0095d9;color:#fff;position:relative;left:-120px;font-weight:700} .xcConfirm .popBox .sgBtn.cancel{background-color:#546a79;color:#fff;position:relative;left:-120px;font-weight:700} #tip-tel{font-size:11px;line-height: 16px; margin-top:2px;margin-left:2px;font-family: Microsoft YaHei; font-weight:500}
js
(function($){window.wxc=window.wxc||{};window.wxc.xcConfirm=function(popHtml,type,options){ var btnType=window.wxc.xcConfirm.btnEnum; var eventType=window.wxc.xcConfirm.eventEnum; var popType={info:{title:"信息",icon:"0 0",btn:btnType.ok},success:{title:"成功",icon:"0 -48px",btn:btnType.ok},error:{title:"錯誤",icon:"-48px -48px",btn:btnType.ok},confirm:{title:"提示",icon:"-48px 0",btn:btnType.okcancel},warning:{title:"警告",icon:"0 -96px",btn:btnType.okcancel},input:{title:"輸入",icon:"",btn:btnType.ok},custom:{title:"",icon:"",btn:btnType.ok}}; var itype=type?type instanceof Object?type:popType[type]||{}:{}; var config=$.extend(true,{title:"",icon:"",btn:btnType.ok,onOk:$.noop,onCancel:$.noop,onClose:$.noop},itype,options); var $txt=$("<p>").html(popHtml); var $tt=$("<span>").addClass("tt").text(config.title); var icon=config.icon; var $icon=icon?$("<div>").addClass("bigIcon").css("backgroundPosition",icon):""; var btn=config.btn; var popId=creatPopId(); var $box=$("<div>").addClass("xcConfirm"); var $layer=$("<div>").addClass("xc_layer"); var $popBox=$("<div>").addClass("popBox"); var $ttBox=$("<div>").addClass("ttBox"); var $txtBox=$("<div>").addClass("txtBox"); var $btnArea=$("<div>").addClass("btnArea"); var $ok=$("<a>").addClass("sgBtn").addClass("ok").text("馬上體驗"); var $cancel=$("<a>").addClass("sgBtn").addClass("cancel").text("取消"); var $input=$("<input>").addClass("inputBox"); var $clsBtn=$("<a>").addClass("clsBtn"); var btns={ok:$ok,cancel:$cancel};init(); var abc=‘<br/><div id="tip-tel">為了我們能更好的服務您，請您填寫以下信息，註冊如遇問題，請您撥打免費服務熱線：025-52617173/52617319</div>‘; $(".ttBox").append(abc); function init(){ if(popType["input"]===itype){ $txt.append($input); } creatDom();bind(); } function creatDom(){$popBox.append($ttBox.append($clsBtn).append($tt)).append($txtBox.append($icon).append($txt)).append($btnArea.append(creatBtnGroup(btn)));$box.attr("id",popId).append($layer).append($popBox);$("body").append($box);} function bind(){ $ok.click(doOk); $(window).bind("keydown",function(e){if(e.keyCode==13){if($("#"+popId).length==1){doOk();}}});$cancel.click(doCancel);$clsBtn.click(doClose); } function doOk(){ //點擊確認就會關閉 以下做input框內容判斷 防止點擊 彈框就關閉 var $o=$(this); var tel = $("#phone").val(); var username = $("#username").val(); var gsname = $("#gsname").val(); var email = $("#email").val(); if(tel== ‘‘ || username == ‘‘ || email == ‘‘){ alert("必填項不可為空"); return false; } if(!checkPhone(tel)){ alert("請填寫正確手機號碼"); return false; } if(!checkEml(email)){ alert("請填寫正確郵件地址"); return false; } config.onOk();$("#"+popId).remove();config.onClose(eventType.ok);//關閉彈框 } function doCancel(){;var $o=$(this);config.onCancel();$("#"+popId).remove();config.onClose(eventType.cancel);} function doClose(){$("#"+popId).remove();config.onClose(eventType.close);$(window).unbind("keydown");} function creatBtnGroup(tp){var $bgp=$("<div>").addClass("btnGroup");$.each(btns,function(i,n){if(btnType[i]==(tp&btnType[i])){$bgp.append(n);}});return $bgp;} function creatPopId(){var i="pop_"+(new Date()).getTime()+parseInt(Math.random()*100000);if($("#"+i).length>0){return creatPopId();}else{return i;}}};window.wxc.xcConfirm.btnEnum={ok:parseInt("0001",2),cancel:parseInt("0010",2),okcancel:parseInt("0011",2)};window.wxc.xcConfirm.eventEnum={ok:1,cancel:2,close:3};window.wxc.xcConfirm.typeEnum={info:"info",success:"success",error:"error",confirm:"confirm",warning:"warning",input:"input",custom:"custom"}; })(jQuery);
別忘記 還有jquery 在之前引入
輕量級彈框 (修改後)