美文网首页
自定义确定弹出框

自定义确定弹出框

作者: Gxiner | 来源:发表于2018-01-25 14:13 被阅读0次

1.0版本

#
这个方法每次弹出都会创建一个div
需要优化。
#
function alertConfirm(obj){
  var shield = document.createElement("DIV");
  shield.id = "shield";
  shield.style.position = "fixed";
  shield.style.left = "17%";
  shield.style.top = "50%";
  shield.style.width = "66%";
  shield.style.height = "auto";
  shield.style.zIndex = "9999";
  strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
  strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:20px;font-weight:bold;height:60px;line-height:60px;border:1px solid #F9CADE;color:white\">[提醒]</li>\n";
  strHtml += " <li style=\"background:#787878;text-align:center;font-size:22px;height:160px;line-height:160px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">"+obj.str+"</li>\n";
  strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:70px;line-height:70px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"取消\" onclick=\"doCancel()\" style=\"width:20%;height:40px;background:#626262;color:white;border:1px solid #ccc;font-size:18px;line-height:40px;outline:none;border-radius: 4px\"/>";
  strHtml += "<input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:20%;height:40px;background:#626262;color:white;border:1px solid #ccc;font-size:18px;line-height:40px;outline:none;margin-left:8%;border-radius: 4px\"/></li>\n";
  strHtml += "</ul>\n";
  shield.innerHTML = strHtml;
  document.body.appendChild(shield);
  this.doOk = function(){
    shield.style.display = "none";
    obj.handlerBtn(true);
  }
  this.doCancel = function(){
   shield.style.display = "none";
   obj.handlerBtn(false);
 }
  document.body.onselectstart = function(){return false;};
}
#
调用
#
 alertConfirm({
        str:'是否提现佣金:'+canDrawMoney,
        handlerBtn:function(rt){
          if (rt) {
            alert("11");
          }else{
            alert("22");
          }
        }
 });

相关文章

网友评论

      本文标题:自定义确定弹出框

      本文链接:https://www.haomeiwen.com/subject/zwjvaxtx.html