Confirm視窗美化

只要蒐尋sweetalert

參考範例
http://t4t5.github.io/sweetalert/

引用
放在本機路徑參考寫法:
//link href="js/sweetalert.css" rel="stylesheet" type="text/css"> 

Html範例
//label class="myMOUSE"  id="selectpassword" onclick="select_password_click()">忘記密碼?

Javascript
//script

   /*預設confirm視窗寫法，若無套用美化效果，這段程式碼就可以了
    function select_password_click() {
       //alert("123");
       if (confirm("*************************")) {
          select_password();
       }
       else { alert("您取消寄送密碼");}
    }*/


   //美化confirm視窗，套用js
    function select_password_click() { 
        //alert(isIE());
        swal_dialog();
    }

    //查詢及寄送密碼
    function select_password() {
        $.ajax({
            type: 'POST',
            url: '****.asp',
            dataType: 'txt',
            data: { "action": "get_password" },
            success: function (data1) {  //回傳密碼
                if (data1 == "查無密碼") {
                    alert("查無密碼")
                }
                else {
                    swal("系統已將信件寄出!", "預計3分鐘內您可以收到信件.", "success");
                    //alert("系統已將信件寄出，約3分鐘內您可以收到信件")
                }
            },
            error: function () { alert('ajax error'); }
        });
    }

    //美化confirm視窗
    function swal_dialog() {
        swal({
            title: "是否寄送密碼至中心個人信箱?",
            //text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes!",
            closeOnConfirm: true
        },
       function (response) {
          if (response == true) {   /*for ie 可以判斷cancel or yes*/           
              select_password();    //查詢及寄送密碼         
          }          
          else { console.log("取消寄信"); }      
       });  
    };

  /*ie無法直接支援swal，加入以下程式使ie可以順利彈跳出預設的confrim視窗*/
  function isIE() {
      var myNav = navigator.userAgent.toLowerCase();
      if ((myNav.indexOf('msie') != -1)) {
          return parseInt(myNav.split('msie')[1]);
      } else {
          return (myNav.indexOf('MSIE')) ? parseInt(myNav.split('MSIE')[1]) : false;
      }
  }
  var proxied = swal;
  swal = function () {
      if (isIE() == '7' || isIE() == '8' || isIE() == '9') {
          if (typeof arguments[0]['showCancelButton'] == 'boolean') {
              var result = confirm(arguments[0]['title']);
              if (arguments[arguments.length - 1] != 0 && typeof arguments[arguments.length - 1] == "function") {
                  arguments[arguments.length - 1](result);
              } else {
                  return result;
              }
          } else {
              if (typeof arguments[0] == 'string') {
                  alert(arguments[0]);
              } else {
                  console.log(typeof arguments[0]);
              }
          }
      } else {
          return proxied.apply(this, arguments);
      }
  };
  /*for ie*/

實際範例 註解:
紫色字體為原始程式碼
藍色字體為美化效果
ie無法支援sweetalert美化
上網搜尋後發現網路上已有提供解法
套上解法後(黃色螢光筆這段)，可判為判斷是否為IE ，IE可以跳出原始預設的confirm視窗
但卻發現按"取消cancel"或"是yes"時，都會判斷成"是yes"
再度GOOGLE後改寫
加上紅色字體，能順利接到指令(Cancel或Yes)

美化後的效果

美化原始程式碼
document.querySelector('ul.examples li.warning.confirm button').onclick = function(){

 swal({
   title: "Are you sure?",
   text: "You will not be able to recover this imaginary file!",
   type: "warning",
   showCancelButton: true,
   confirmButtonColor: "#DD6B55",
   confirmButtonText: "Yes, delete it!",
   closeOnConfirm: false 
 },
 function(){
   swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
 });

};