zoukankan      html  css  js  c++  java
  • 自定义alert,confirm,prompt事件,模仿window.alert(),confirm(),prompt()

    css代码:

     1 /*custom_alert and custom_confirm*/ 
     2 .custom_popupFilterBg {width: 100%; height: 100%; background-color: #000; filter: alpha(opacity=60); opacity: 0.6; position: fixed; z-index: 12; }
     3 .custom_popupContent{position: fixed; left: 50%; top: 40%; z-index: 15; filter: alpha(opacity=0); opacity: 0;background-color: #585858; padding: 30px 30px; border: 4px solid #ccc; border-radius: 10px; min-width: 180px; max-width:600px;text-align: center; }
     4 .custom_popupContent .custom_popupTipsText{font-size:20px;}
     5 .custom_popupContent .custom_popupTipsText.alignLeft{text-align: left;}
     6 .custom_popupContent .custom_popupBtnsContainer{text-align: center;margin-top:30px;}
     7 .custom_popupContent .custom_popupBtnsContainer input[type='button']{border: 1px solid #0F620A; color: #fff; cursor: pointer; height: 28px; line-height: 28px; font-size: 12px;min-width: 68px; border-radius: 4px; }
     8 .custom_popupContent .custom_popupBtnsContainer input[type='button']:first-child{background-color: #1DA514;margin-right:10px;margin-right: 1rem;}
     9 .custom_popupContent .custom_popupBtnsContainer input[value='Cancel']{border-color: #524C4C; background-color: #a0a0a0;}
    10 .custom_popupContent .custom_popupBtnsContainer input[type='button']:first-child:hover{background-color:#22961A;}
    11 .custom_popupContent .custom_popupBtnsContainer input[value='Cancel']:hover{background-color:#999;}
    12 .custom_popupContent .custom_popupBtnsContainer input[type='button']:focus{border-color: #3ff;}
    13 .custom_popupContent input.inputTexts{width: 98%;height: 24px;line-height: 24px;background-color: #f3f3f3;border:1px solid #d3d3d3;margin-top: 15px;text-indent: 0.5em;font-size: 12px;}
    14 .custom_popupContent input.inputTexts:focus{border-color: #666;}

    jquery代码:

      1 var oUtils = function(){
      2 
      3   //text为弹出的文字信息,timestamp为多长时间弹出框自动消失,callback为回调方法
      4  function _alertTips(text,timestamp,callback){
      5   var autoHideFlag = ((typeof(timestamp) !="undefined") && (timestamp!=null)) ?true:false;
      6  
      7   createTipsEvent("alert",text,callback,autoHideFlag);
      8  
      9   var $obj = $("#alert_popupContent");
     10   if($obj.siblings(".custom_popupContent").length>0){
     11    $obj.css("z-index","18");
     12    $obj.prev(".custom_popupFilterBg").css("z-index","18");
     13   }
     14   if(autoHideFlag){
     15    var _timer = setTimeout(removeCustomTips,timestamp);
     16    function removeCustomTips(){
     17     if($("#alert_popupBg").css("display")!= undefined){
     18      if(typeof(callback)!="undefined" && $.isFunction(callback)){
     19       callback();
     20      }
     21      $("#alert_popupBg,#alert_popupContent").fadeOut(1000,function(){
     22       $("#alert_popupBg,#alert_popupContent").remove();
     23      });
     24     }
     25     clearTimeout(_timer);
     26    };
     27   }
     28  }
     29 
     30  //text——>弹出的文字信息,confirmFun——>点击确认按钮之后执行的方法,cancelFun——>点击取消按钮之后执行的方法
     31  function _confirmTips(text,confirmFun,cancelFun){
     32   createTipsEvent("confirm",text,confirmFun,cancelFun);
     33  }
     34  
     35 //text——>弹出的文字信息,confirmFun——>点击确认按钮之后执行的方法,cancelFun——>点击取消按钮之后执行的方法
     36  function _promptTips(text,confirmFun,cancelFun){
     37   createTipsEvent("prompt",text,confirmFun,cancelFun);
     38  }
     39  
     40  function createTipsEvent(typeFlag,text,confirmFun,lastParam){
     41   var    operateStr="";
     42   switch(typeFlag){
     43    case "alert":
     44     if(!lastParam){
     45      operateStr = '<div id="'+typeFlag+'_operateBtns" class="custom_popupBtnsContainer">
     46          <input type="button" value="OK" id="'+typeFlag+'_sureBtn"/>
     47         </div>';
     48     };
     49     break;
     50    case "confirm":
     51    case "prompt":
     52      operateStr='<div id="'+typeFlag+'_operateBtns"  class="custom_popupBtnsContainer">
     53          <input type="button" value="OK" id="'+typeFlag+'_sureBtn"/>
     54          <input type="button" value="Cancel" id="'+typeFlag+'_cancelBtn"/>
     55         </div>';
     56     break;
     57   };
     58  
     59   var _html = '<div id="'+typeFlag+'_popupBg" class="custom_popupFilterBg"></div>
     60     <div id="'+typeFlag+'_popupContent" class="custom_popupContent">
     61         <div id="'+typeFlag+'_tipsText" class="custom_popupTipsText"></div>'+
     62      (typeFlag == "prompt"?'<input type="text" name="inputMsg"  class="inputTexts"/>':'')
     63      +operateStr+
     64     '</div>';
     65      
     66   $("body").prepend(_html);
     67   $("#"+typeFlag+"_tipsText").html(text);
     68   var $Obj = $("#"+typeFlag+"_popupContent");
     69   $Obj.animate({
     70    filter: "alpha(opacity=100)",
     71    opacity:"1",
     72    marginLeft:-($Obj.width()/2),
     73    marginTop:-($Obj.height()/2)
     74   },300);
     75  
     76   switch(typeFlag){
     77    case "alert":
     78    case "confirm":
     79     $("#"+typeFlag+"_operateBtns input[value='OK']").focus();
     80     break;
     81    case "prompt":
     82     $Obj.find("input[name='inputMsg']").focus();
     83     break;
     84   }
     85  
     86   $("#"+typeFlag+"_operateBtns").off("click","#"+typeFlag+"_sureBtn");
     87   $("#"+typeFlag+"_operateBtns").on("click","#"+typeFlag+"_sureBtn",function(){
     88     switch(typeFlag){
     89      case "alert":
     90      case "confirm":
     91       if(typeof(confirmFun)!="undefined" && $.isFunction(confirmFun)){
     92        confirmFun();
     93       }
     94       closeTips($(this).parent().parent(".custom_popupContent"));
     95       break;
     96      case "prompt":
     97       var _inputMsg = $.trim($Obj.find("input[name='inputMsg']").val());
     98       if(typeof(confirmFun)!="undefined" && $.isFunction(confirmFun)){
     99        if(confirmFun(_inputMsg)){
    100         closeTips($(this).parent().parent(".custom_popupContent"));
    101        };
    102       }
    103       break;
    104     }
    105   });
    106  
    107   $("#"+typeFlag+"_operateBtns").off("click","#"+typeFlag+"_cancelBtn");
    108   $("#"+typeFlag+"_operateBtns").on("click","#"+typeFlag+"_cancelBtn",function(){
    109    closeTips($(this).parent().parent(".custom_popupContent"));
    110    if(typeof(lastParam)!="undefined" && $.isFunction(lastParam)){
    111     lastParam();
    112    }
    113   });
    114  }
    115  
    116  
    117  function closeTips(obj){
    118   $(obj).prev(".custom_popupFilterBg").remove();
    119   $(obj).remove();
    120  }
    121  
    122  return{
    123   alertTips:function(text,timestamp,callback){
    124    _alertTips(text,timestamp,callback);
    125   },
    126   confirmTips:function(text,confirmFun,cancelFun){
    127    _confirmTips(text,confirmFun,cancelFun);
    128   },
    129   promptTips:function(text,confirmFun,cancelFun){
    130    _promptTips(text,confirmFun,cancelFun);
    131   } 
    132  }
    133 }();

    demo实例:

     1 oUtils.alertTips("Please input the page number.",200,test);
     2 
     3 //弹出框在0.2s后自动消失,然后调用test()方法,第二个和第三个参数是可选的
     4 
     5 
     6  oUtils.confirmTips("Would you like to delete this service?",confirmFun,cancelFun);
     7 
     8 
     9 oUtils.promptTips("Please fill the email here:",function(email){
    10     if(email==""){
    11         // 什么都没输入
    12         oUtils.alertTips("Email cannot be empty.");
    13         return false;
    14     }else{
    15         //输入后点击确认执行操作的地方
    16 
    17         ......
    18 
    19    return true;
    20     }
    21 },cancelFun);
  • 相关阅读:
    shell编程之 ()[] {}
    mysql环境搭建
    CSS布局基础——BFC
    Java线程
    chrome developer tool—— 断点调试篇
    JavaScript技巧[转载]
    如何在github中创建演示demo
    rem在响应式布局中的应用
    javascript模块化
    浏览器客户端的数据存储
  • 原文地址:https://www.cnblogs.com/nancy0324/p/4920427.html
Copyright © 2011-2022 走看看