SwwetAlert消息提示插件,支持手機移動響應式替換alert漂亮的消息提示插件

SwwetAlert

支持手機移動響應式消息提示插件

• 官方地址：http://tristanedwards.me/sweetalert IE11有閃退
• IE11無閃退 地址：http://www.js-css.cn/jscode/tips/tips13/
• IE11無閃退瀏覽器點擊取消也可以執行方法地址：http://www.htmleaf.com/Demo/20141218889.html

---

語法參考

 swal("Good job!", "You clicked the button!", "success")

效果圖

IE11無閃退JS (sweet-alert.min.js)

!function (e, t) { function n() { var e = '<div class="sweet-overlay" tabIndex="-1"></div><div class="sweet-alert" tabIndex="-1"><div class="icon error"><span class="x-mark"><span class="line left"></span><span class="line right"></span></span></div><div class="icon warning"> <span class="body"></span> <span class="dot"></span> </div> <div class="icon info"></div> <div class="icon success"> <span class="line tip"></span> <span class="line long"></span> <div class="placeholder"></div> <div class="fix"></div> </div> <div class="icon custom"></div> <h2>Title</h2><p>Text</p><button class="cancel" tabIndex="2">Cancel</button><button class="confirm" tabIndex="1">OK</button></div>', n = t.createElement("div"); n.innerHTML = e, t.body.appendChild(n) } function o(t) { var n = y(), o = n.querySelector("h2"), r = n.querySelector("p"), a = n.querySelector("button.cancel"), c = n.querySelector("button.confirm"); if (o.innerHTML = b(t.title).split("\n").join("<br>"), r.innerHTML = b(t.text || "").split("\n").join("<br>"), t.text && w(r), x(n.querySelectorAll(".icon")), t.type) { for (var l = !1, s = 0; s < f.length; s++) if (t.type === f[s]) { l = !0; break } if (!l) return e.console.error("Unknown alert type: " + t.type), !1; var u = n.querySelector(".icon." + t.type); switch (w(u), t.type) { case "success": g(u, "animate"), g(u.querySelector(".tip"), "animateSuccessTip"), g(u.querySelector(".long"), "animateSuccessLong"); break; case "error": g(u, "animateErrorIcon"), g(u.querySelector(".x-mark"), "animateXMark"); break; case "warning": g(u, "pulseWarning"), g(u.querySelector(".body"), "pulseWarningIns"), g(u.querySelector(".dot"), "pulseWarningIns") } } if (t.imageUrl) { var d = n.querySelector(".icon.custom"); d.style.backgroundImage = "url(" + t.imageUrl + ")", w(d); var p = 80, m = 80; if (t.imageSize) { var v = t.imageSize.split("x")[0], h = t.imageSize.split("x")[1]; v && h ? (p = v, m = h, d.css({ width: v + "px", height: h + "px" })) : e.console.error("Parameter imageSize expects value with format WIDTHxHEIGHT, got " + t.imageSize) } d.setAttribute("style", d.getAttribute("style") + "width:" + p + "px; height:" + m + "px") } n.setAttribute("data-has-cancel-button", t.showCancelButton), t.showCancelButton ? a.style.display = "inline-block" : x(a), t.cancelButtonText && (a.innerHTML = b(t.cancelButtonText)), t.confirmButtonText && (c.innerHTML = b(t.confirmButtonText)), c.style.backgroundColor = t.confirmButtonColor, i(c, t.confirmButtonColor), n.setAttribute("data-allow-ouside-click", t.allowOutsideClick); var S = t.doneFunction ? !0 : !1; n.setAttribute("data-has-done-function", S) } function r(e, t) { e = String(e).replace(/[^0-9a-f]/gi, ""), e.length < 6 && (e = e[0] + e[0] + e[1] + e[1] + e[2] + e[2]), t = t || 0; var n = "#", o, r; for (r = 0; 3 > r; r++) o = parseInt(e.substr(2 * r, 2), 16), o = Math.round(Math.min(Math.max(0, o + o * t), 255)).toString(16), n += ("00" + o).substr(o.length); return n } function a(e) { var t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e); return t ? parseInt(t[1], 16) + ", " + parseInt(t[2], 16) + ", " + parseInt(t[3], 16) : null } function i(e, t) { var n = a(t); e.style.boxShadow = "0 0 2px rgba(" + n + ", 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)" } function c() { var e = y(); B(p(), 10), w(e), g(e, "showSweetAlert"), v(e, "hideSweetAlert"), I = t.activeElement; var n = e.querySelector("button.confirm"); n.focus(), setTimeout(function () { g(e, "visible") }, 500) } function l() { var n = y(); T(p(), 5), T(n, 5), v(n, "showSweetAlert"), g(n, "hideSweetAlert"), v(n, "visible"); var o = n.querySelector(".icon.success"); v(o, "animate"), v(o.querySelector(".tip"), "animateSuccessTip"), v(o.querySelector(".long"), "animateSuccessLong"); var r = n.querySelector(".icon.error"); v(r, "animateErrorIcon"), v(r.querySelector(".x-mark"), "animateXMark"); var a = n.querySelector(".icon.warning"); v(a, "pulseWarning"), v(a.querySelector(".body"), "pulseWarningIns"), v(a.querySelector(".dot"), "pulseWarningIns"), e.onkeydown = M, t.onclick = A, I && I.focus(), L = void 0 } function s() { var e = y(); e.style.marginTop = C(y()) } var u = ".sweet-alert", d = ".sweet-overlay", f = ["error", "warning", "info", "success"], y = function () { return t.querySelector(u) }, p = function () { return t.querySelector(d) }, m = function (e, t) { return new RegExp(" " + t + " ").test(" " + e.className + " ") }, g = function (e, t) { m(e, t) || (e.className += " " + t) }, v = function (e, t) { var n = " " + e.className.replace(/[\t\r\n]/g, " ") + " "; if (m(e, t)) { for (; n.indexOf(" " + t + " ") >= 0;) n = n.replace(" " + t + " ", " "); e.className = n.replace(/^\s+|\s+$/g, "") } }, b = function (e) { var n = t.createElement("div"); return n.appendChild(t.createTextNode(e)), n.innerHTML }, h = function (e) { e.style.opacity = "", e.style.display = "block" }, w = function (e) { if (e && !e.length) return h(e); for (var t = 0; t < e.length; ++t) h(e[t]) }, S = function (e) { e.style.opacity = "", e.style.display = "none" }, x = function (e) { if (e && !e.length) return S(e); for (var t = 0; t < e.length; ++t) S(e[t]) }, k = function (e, t) { for (var n = t.parentNode; null !== n;) { if (n === e) return !0; n = n.parentNode } return !1 }, C = function (e) { e.style.left = "-9999px", e.style.display = "block"; var t = e.clientHeight, n = parseInt(getComputedStyle(e).getPropertyValue("padding"), 10); return e.style.left = "", e.style.display = "none", "-" + parseInt(t / 2 + n) + "px" }, B = function (e, t) { t = t || 16, e.style.opacity = 0, e.style.display = "block"; var n = +new Date, o = function () { e.style.opacity = +e.style.opacity + (new Date - n) / 100, n = +new Date, +e.style.opacity < 1 && setTimeout(o, t) }; o() }, T = function (e, t) { t = t || 16, e.style.opacity = 1; var n = +new Date, o = function () { e.style.opacity = +e.style.opacity - (new Date - n) / 100, n = +new Date, +e.style.opacity > 0 ? setTimeout(o, t) : e.style.display = "none" }; o() }, E = function (n) { if (MouseEvent) { var o = new MouseEvent("click", { view: e, bubbles: !1, cancelable: !0 }); n.dispatchEvent(o) } else if (t.createEvent) { var r = t.createEvent("MouseEvents"); r.initEvent("click", !1, !1), n.dispatchEvent(r) } else t.createEventObject ? n.fireEvent("onclick") : "function" == typeof n.onclick && n.onclick() }, q = function (t) { "function" == typeof t.stopPropagation ? (t.stopPropagation(), t.preventDefault()) : e.event && e.event.hasOwnProperty("cancelBubble") && (e.event.cancelBubble = !0) }, I, A, M, L; e.sweetAlert = e.swal = function () { function n(e) { var t = e.keyCode || e.which; if (-1 !== [9, 13, 32, 27].indexOf(t)) { for (var n = e.target || e.srcElement, o = -1, r = 0; r < h.length; r++) if (n === h[r]) { o = r; break } 9 === t ? (n = -1 === o ? v : o === h.length - 1 ? h[0] : h[o + 1], q(e), n.focus(), i(n, u.confirmButtonColor)) : (n = 13 === t || 32 === t ? -1 === o ? v : void 0 : 27 !== t || b.hidden || "none" === b.style.display ? void 0 : b, void 0 !== n && E(n, e)) } } function a(e) { var t = e.target || e.srcElement, n = e.relatedTarget, o = m(d, "visible"); if (o) { var r = -1; if (null !== n) { for (var a = 0; a < h.length; a++) if (n === h[a]) { r = a; break } -1 === r && t.focus() } else L = t } } var u = { title: "", text: "", type: null, allowOutsideClick: !1, showCancelButton: !1, confirmButtonText: "OK", confirmButtonColor: "#AEDEF4", cancelButtonText: "Cancel", imageUrl: null, imageSize: null }; if (void 0 === arguments[0]) return e.console.error("sweetAlert expects at least 1 attribute!"), !1; switch (typeof arguments[0]) { case "string": u.title = arguments[0], u.text = arguments[1] || "", u.type = arguments[2] || ""; break; case "object": if (void 0 === arguments[0].title) return e.console.error('Missing "title" argument!'), !1; u.title = arguments[0].title, u.text = arguments[0].text || u.text, u.type = arguments[0].type || u.type, u.allowOutsideClick = arguments[0].allowOutsideClick || u.allowOutsideClick, u.showCancelButton = arguments[0].showCancelButton || u.showCancelButton, u.confirmButtonText = u.showCancelButton ? "Confirm" : u.confirmButtonText, u.confirmButtonText = arguments[0].confirmButtonText || u.confirmButtonText, u.confirmButtonColor = arguments[0].confirmButtonColor || u.confirmButtonColor, u.cancelButtonText = arguments[0].cancelButtonText || u.cancelButtonText, u.imageUrl = arguments[0].imageUrl || u.imageUrl, u.imageSize = arguments[0].imageSize || u.imageSize, u.doneFunction = arguments[1] || null; break; default: return e.console.error('Unexpected type of argument! Expected "string" or "object", got ' + typeof arguments[0]), !1 } o(u), s(), c(); for (var d = y(), f = function (e) { var t = e.target || e.srcElement, n = "confirm" === t.className, o = m(d, "visible"), a = u.doneFunction && "true" === d.getAttribute("data-has-done-function"); switch (e.type) { case "mouseover": n && (e.target.style.backgroundColor = r(u.confirmButtonColor, -.04)); break; case "mouseout": n && (e.target.style.backgroundColor = u.confirmButtonColor); break; case "mousedown": n && (e.target.style.backgroundColor = r(u.confirmButtonColor, -.14)); break; case "mouseup": n && (e.target.style.backgroundColor = r(u.confirmButtonColor, -.04)); break; case "focus": var i = d.querySelector("button.confirm"), c = d.querySelector("button.cancel"); n ? c.style.boxShadow = "none" : i.style.boxShadow = "none"; break; case "click": n && a && o && u.doneFunction(), l() } }, p = d.querySelectorAll("button"), g = 0; g < p.length; g++) p[g].onclick = f, p[g].onmouseover = f, p[g].onmouseout = f, p[g].onmousedown = f, p[g].onfocus = f; A = t.onclick, t.onclick = function (e) { var t = e.target || e.srcElement, n = d === t, o = k(d, e.target), r = m(d, "visible"), a = "true" === d.getAttribute("data-allow-ouside-click"); !n && !o && r && a && l() }; var v = d.querySelector("button.confirm"), b = d.querySelector("button.cancel"), h = d.querySelectorAll("button:not([type=hidden])"); M = e.onkeydown, e.onkeydown = n, v.onblur = a, b.onblur = a, e.onfocus = function () { e.setTimeout(function () { void 0 !== L && (L.focus(), L = void 0) }, 0) } }, function () { "complete" === t.readyState || "interactive" === t.readyState ? n() : t.addEventListener ? t.addEventListener("DOMContentLoaded", function e() { t.removeEventListener("DOMContentLoaded", arguments.callee, !1), n() }, !1) : t.attachEvent && t.attachEvent("onreadystatechange", function () { "complete" === t.readyState && (t.detachEvent("onreadystatechange", arguments.callee), n()) }) }() }(window, document);

瀏覽器兼容

1. 目前，官網代碼對IE１１存在閃退問題

2. 可將不閃退js代碼替換官網插件的js代碼

IE11無閃退、支持點擊取消可執行方法JS (sweet-alert.js)

// SweetAlert
// 2014 (c) - Tristan Edwards
// github.com/t4t5/sweetalert
; (function (window, document) {

    var modalClass = '.sweet-alert',
        overlayClass = '.sweet-overlay',
        alertTypes = ['error', 'warning', 'info', 'success'],
        defaultParams = {
            title: '',
            text: '',
            type: null,
            allowOutsideClick: false,
            showCancelButton: false,
            closeOnConfirm: true,
            closeOnCancel: true,
            confirmButtonText: 'OK',
            confirmButtonColor: '#AEDEF4',
            cancelButtonText: 'Cancel',
            imageUrl: null,
            imageSize: null,
            timer: null
        };


    /*
     * Manipulate DOM
     */

    var getModal = function () {
        return document.querySelector(modalClass);
    },
      getOverlay = function () {
          return document.querySelector(overlayClass);
      },
      hasClass = function (elem, className) {
          return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
      },
      addClass = function (elem, className) {
          if (!hasClass(elem, className)) {
              elem.className += ' ' + className;
          }
      },
      removeClass = function (elem, className) {
          var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
          if (hasClass(elem, className)) {
              while (newClass.indexOf(' ' + className + ' ') >= 0) {
                  newClass = newClass.replace(' ' + className + ' ', ' ');
              }
              elem.className = newClass.replace(/^\s+|\s+$/g, '');
          }
      },
      escapeHtml = function (str) {
          var div = document.createElement('div');
          div.appendChild(document.createTextNode(str));
          return div.innerHTML;
      },
      _show = function (elem) {
          elem.style.opacity = '';
          elem.style.display = 'block';
      },
      show = function (elems) {
          if (elems && !elems.length) {
              return _show(elems);
          }
          for (var i = 0; i < elems.length; ++i) {
              _show(elems[i]);
          }
      },
      _hide = function (elem) {
          elem.style.opacity = '';
          elem.style.display = 'none';
      },
      hide = function (elems) {
          if (elems && !elems.length) {
              return _hide(elems);
          }
          for (var i = 0; i < elems.length; ++i) {
              _hide(elems[i]);
          }
      },
      isDescendant = function (parent, child) {
          var node = child.parentNode;
          while (node !== null) {
              if (node === parent) {
                  return true;
              }
              node = node.parentNode;
          }
          return false;
      },
      getTopMargin = function (elem) {
          elem.style.left = '-9999px';
          elem.style.display = 'block';

          var height = elem.clientHeight,
              padding;
          if (typeof getComputedStyle !== "undefined") { /* IE 8 */
              padding = parseInt(getComputedStyle(elem).getPropertyValue('padding'), 10);
          } else {
              padding = parseInt(elem.currentStyle.padding);
          }

          elem.style.left = '';
          elem.style.display = 'none';
          return ('-' + parseInt(height / 2 + padding) + 'px');
      },
      fadeIn = function (elem, interval) {
          if (+elem.style.opacity < 1) {
              interval = interval || 16;
              elem.style.opacity = 0;
              elem.style.display = 'block';
              var last = +new Date();
              var tick = function () {
                  elem.style.opacity = +elem.style.opacity + (new Date() - last) / 100;
                  last = +new Date();

                  if (+elem.style.opacity < 1) {
                      setTimeout(tick, interval);
                  }
              };
              tick();
          }
          elem.style.display = 'block'; //fallback IE8
      },
      fadeOut = function (elem, interval) {
          interval = interval || 16;
          elem.style.opacity = 1;
          var last = +new Date();
          var tick = function () {
              elem.style.opacity = +elem.style.opacity - (new Date() - last) / 100;
              last = +new Date();

              if (+elem.style.opacity > 0) {
                  setTimeout(tick, interval);
              } else {
                  elem.style.display = 'none';
              }
          };
          tick();
      },
      fireClick = function (node) {
          // Taken from http://www.nonobtrusive.com/2011/11/29/programatically-fire-crossbrowser-click-event-with-javascript/
          // Then fixed for today's Chrome browser.
          if (MouseEvent) {
              // Up-to-date approach
              var mevt = new MouseEvent('click', {
                  view: window,
                  bubbles: false,
                  cancelable: true
              });
              node.dispatchEvent(mevt);
          } else if (document.createEvent) {
              // Fallback
              var evt = document.createEvent('MouseEvents');
              evt.initEvent('click', false, false);
              node.dispatchEvent(evt);
          } else if (document.createEventObject) {
              node.fireEvent('onclick');
          } else if (typeof node.onclick === 'function') {
              node.onclick();
          }
      },
      stopEventPropagation = function (e) {
          // In particular, make sure the space bar doesn't scroll the main window.
          if (typeof e.stopPropagation === 'function') {
              e.stopPropagation();
              e.preventDefault();
          } else if (window.event && window.event.hasOwnProperty('cancelBubble')) {
              window.event.cancelBubble = true;
          }
      };

    // Remember state in cases where opening and handling a modal will fiddle with it.
    var previousActiveElement,
        previousDocumentClick,
        previousWindowKeyDown,
        lastFocusedButton;

    /*
     * Add modal + overlay to DOM
     */

    window.sweetAlertInitialize = function () {
        var sweetHTML = '<div class="sweet-overlay" tabIndex="-1"></div><div class="sweet-alert" tabIndex="-1"><div class="icon error"><span class="x-mark"><span class="line left"></span><span class="line right"></span></span></div><div class="icon warning"> <span class="body"></span> <span class="dot"></span> </div> <div class="icon info"></div> <div class="icon success"> <span class="line tip"></span> <span class="line long"></span> <div class="placeholder"></div> <div class="fix"></div> </div> <div class="icon custom"></div> <h2>Title</h2><p>Text</p><button class="cancel" tabIndex="2">Cancel</button><button class="confirm" tabIndex="1">OK</button></div>',
            sweetWrap = document.createElement('div');

        sweetWrap.innerHTML = sweetHTML;

        // For readability: check sweet-alert.html
        document.body.appendChild(sweetWrap);
    };

    /*
     * Global sweetAlert function
     */

    window.sweetAlert = window.swal = function () {
        if (arguments[0] === undefined) {
            window.console.error('sweetAlert expects at least 1 attribute!');
            return false;
        }

        var params = extend({}, defaultParams);

        switch (typeof arguments[0]) {

            case 'string':
                params.title = arguments[0];
                params.text = arguments[1] || '';
                params.type = arguments[2] || '';

                break;

            case 'object':
                if (arguments[0].title === undefined) {
                    window.console.error('Missing "title" argument!');
                    return false;
                }

                params.title = arguments[0].title;
                params.text = arguments[0].text || defaultParams.text;
                params.type = arguments[0].type || defaultParams.type;
                params.allowOutsideClick = arguments[0].allowOutsideClick || defaultParams.allowOutsideClick;
                params.showCancelButton = arguments[0].showCancelButton !== undefined ? arguments[0].showCancelButton : defaultParams.showCancelButton;
                params.closeOnConfirm = arguments[0].closeOnConfirm !== undefined ? arguments[0].closeOnConfirm : defaultParams.closeOnConfirm;
                params.closeOnCancel = arguments[0].closeOnCancel !== undefined ? arguments[0].closeOnCancel : defaultParams.closeOnCancel;
                params.timer = arguments[0].timer || defaultParams.timer;

                // Show "Confirm" instead of "OK" if cancel button is visible
                params.confirmButtonText = (defaultParams.showCancelButton) ? 'Confirm' : defaultParams.confirmButtonText;
                params.confirmButtonText = arguments[0].confirmButtonText || defaultParams.confirmButtonText;
                params.confirmButtonColor = arguments[0].confirmButtonColor || defaultParams.confirmButtonColor;
                params.cancelButtonText = arguments[0].cancelButtonText || defaultParams.cancelButtonText;
                params.imageUrl = arguments[0].imageUrl || defaultParams.imageUrl;
                params.imageSize = arguments[0].imageSize || defaultParams.imageSize;
                params.doneFunction = arguments[1] || null;

                break;

            default:
                window.console.error('Unexpected type of argument! Expected "string" or "object", got ' + typeof arguments[0]);
                return false;

        }

        setParameters(params);
        fixVerticalPosition();
        openModal();


        // Modal interactions
        var modal = getModal();

        // Mouse interactions
        var onButtonEvent = function (event) {
            var e = event || window.event;
            var target = e.target || e.srcElement,
                targetedConfirm = (target.className === 'confirm'),
                modalIsVisible = hasClass(modal, 'visible'),
                doneFunctionExists = (params.doneFunction && modal.getAttribute('data-has-done-function') === 'true');

            switch (e.type) {
                case ("mouseover"):
                    if (targetedConfirm) {
                        target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.04);
                    }
                    break;
                case ("mouseout"):
                    if (targetedConfirm) {
                        target.style.backgroundColor = params.confirmButtonColor;
                    }
                    break;
                case ("mousedown"):
                    if (targetedConfirm) {
                        target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.14);
                    }
                    break;
                case ("mouseup"):
                    if (targetedConfirm) {
                        target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.04);
                    }
                    break;
                case ("focus"):
                    var $confirmButton = modal.querySelector('button.confirm'),
                        $cancelButton = modal.querySelector('button.cancel');

                    if (targetedConfirm) {
                        $cancelButton.style.boxShadow = 'none';
                    } else {
                        $confirmButton.style.boxShadow = 'none';
                    }
                    break;
                case ("click"):
                    if (targetedConfirm && doneFunctionExists && modalIsVisible) { // Clicked "confirm"

                        params.doneFunction(true);

                        if (params.closeOnConfirm) {
                            closeModal();
                        }
                    } else if (doneFunctionExists && modalIsVisible) { // Clicked "cancel"

                        // Check if callback function expects a parameter (to track cancel actions)
                        var functionAsStr = String(params.doneFunction).replace(/\s/g, '');
                        var functionHandlesCancel = functionAsStr.substring(0, 9) === "function(" && functionAsStr.substring(9, 10) !== ")";

                        if (functionHandlesCancel) {
                            params.doneFunction(false);
                        }

                        if (params.closeOnCancel) {
                            closeModal();
                        }
                    } else {
                        closeModal();
                    }

                    break;
            }
        };

        var $buttons = modal.querySelectorAll('button');
        for (var i = 0; i < $buttons.length; i++) {
            $buttons[i].onclick = onButtonEvent;
            $buttons[i].onmouseover = onButtonEvent;
            $buttons[i].onmouseout = onButtonEvent;
            $buttons[i].onmousedown = onButtonEvent;
            //$buttons[i].onmouseup   = onButtonEvent;
            $buttons[i].onfocus = onButtonEvent;
        }

        // Remember the current document.onclick event.
        previousDocumentClick = document.onclick;
        document.onclick = function (event) {
            var e = event || window.event;
            var target = e.target || e.srcElement;

            var clickedOnModal = (modal === target),
                clickedOnModalChild = isDescendant(modal, target),
                modalIsVisible = hasClass(modal, 'visible'),
                outsideClickIsAllowed = modal.getAttribute('data-allow-ouside-click') === 'true';

            if (!clickedOnModal && !clickedOnModalChild && modalIsVisible && outsideClickIsAllowed) {
                closeModal();
            }
        };


        // Keyboard interactions
        var $okButton = modal.querySelector('button.confirm'),
            $cancelButton = modal.querySelector('button.cancel'),
            $modalButtons = modal.querySelectorAll('button:not([type=hidden])');


        function handleKeyDown(event) {
            var e = event || window.event;
            var keyCode = e.keyCode || e.which;

            if ([9, 13, 32, 27].indexOf(keyCode) === -1) {
                // Don't do work on keys we don't care about.
                return;
            }

            var $targetElement = e.target || e.srcElement;

            var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
            for (var i = 0; i < $modalButtons.length; i++) {
                if ($targetElement === $modalButtons[i]) {
                    btnIndex = i;
                    break;
                }
            }

            if (keyCode === 9) {
                // TAB
                if (btnIndex === -1) {
                    // No button focused. Jump to the confirm button.
                    $targetElement = $okButton;
                } else {
                    // Cycle to the next button
                    if (btnIndex === $modalButtons.length - 1) {
                        $targetElement = $modalButtons[0];
                    } else {
                        $targetElement = $modalButtons[btnIndex + 1];
                    }
                }

                stopEventPropagation(e);
                $targetElement.focus();
                setFocusStyle($targetElement, params.confirmButtonColor); // TODO

            } else {
                if (keyCode === 13 || keyCode === 32) {
                    if (btnIndex === -1) {
                        // ENTER/SPACE clicked outside of a button.
                        $targetElement = $okButton;
                    } else {
                        // Do nothing - let the browser handle it.
                        $targetElement = undefined;
                    }
                } else if (keyCode === 27 && !($cancelButton.hidden || $cancelButton.style.display === 'none')) {
                    // ESC to cancel only if there's a cancel button displayed (like the alert() window).
                    $targetElement = $cancelButton;
                } else {
                    // Fallback - let the browser handle it.
                    $targetElement = undefined;
                }

                if ($targetElement !== undefined) {
                    fireClick($targetElement, e);
                }
            }
        }

        previousWindowKeyDown = window.onkeydown;
        window.onkeydown = handleKeyDown;

        function handleOnBlur(event) {
            var e = event || window.event;
            var $targetElement = e.target || e.srcElement,
                $focusElement = e.relatedTarget,
                modalIsVisible = hasClass(modal, 'visible');

            if (modalIsVisible) {
                var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.

                if ($focusElement !== null) {
                    // If we picked something in the DOM to focus to, let's see if it was a button.
                    for (var i = 0; i < $modalButtons.length; i++) {
                        if ($focusElement === $modalButtons[i]) {
                            btnIndex = i;
                            break;
                        }
                    }

                    if (btnIndex === -1) {
                        // Something in the dom, but not a visible button. Focus back on the button.
                        $targetElement.focus();
                    }
                } else {
                    // Exiting the DOM (e.g. clicked in the URL bar);
                    lastFocusedButton = $targetElement;
                }
            }
        }

        $okButton.onblur = handleOnBlur;
        $cancelButton.onblur = handleOnBlur;

        window.onfocus = function () {
            // When the user has focused away and focused back from the whole window.
            window.setTimeout(function () {
                // Put in a timeout to jump out of the event sequence. Calling focus() in the event
                // sequence confuses things.
                if (lastFocusedButton !== undefined) {
                    lastFocusedButton.focus();
                    lastFocusedButton = undefined;
                }
            }, 0);
        };
    };

    /**
     * Set default params for each popup
     * @param {Object} userParams
     */
    window.swal.setDefaults = function (userParams) {
        if (!userParams) {
            throw new Error('userParams is required');
        }
        if (typeof userParams !== 'object') {
            throw new Error('userParams has to be a object');
        }

        extend(defaultParams, userParams);
    };

    /*
     * Set type, text and actions on modal
     */

    function setParameters(params) {
        var modal = getModal();

        var $title = modal.querySelector('h2'),
            $text = modal.querySelector('p'),
            $cancelBtn = modal.querySelector('button.cancel'),
            $confirmBtn = modal.querySelector('button.confirm');

        // Title
        $title.innerHTML = escapeHtml(params.title).split("\n").join("<br>");

        // Text
        $text.innerHTML = escapeHtml(params.text || '').split("\n").join("<br>");
        if (params.text) {
            show($text);
        }

        // Icon
        hide(modal.querySelectorAll('.icon'));
        if (params.type) {
            var validType = false;
            for (var i = 0; i < alertTypes.length; i++) {
                if (params.type === alertTypes[i]) {
                    validType = true;
                    break;
                }
            }
            if (!validType) {
                window.console.error('Unknown alert type: ' + params.type);
                return false;
            }
            var $icon = modal.querySelector('.icon.' + params.type);
            show($icon);

            // Animate icon
            switch (params.type) {
                case "success":
                    addClass($icon, 'animate');
                    addClass($icon.querySelector('.tip'), 'animateSuccessTip');
                    addClass($icon.querySelector('.long'), 'animateSuccessLong');
                    break;
                case "error":
                    addClass($icon, 'animateErrorIcon');
                    addClass($icon.querySelector('.x-mark'), 'animateXMark');
                    break;
                case "warning":
                    addClass($icon, 'pulseWarning');
                    addClass($icon.querySelector('.body'), 'pulseWarningIns');
                    addClass($icon.querySelector('.dot'), 'pulseWarningIns');
                    break;
            }

        }

        // Custom image
        if (params.imageUrl) {
            var $customIcon = modal.querySelector('.icon.custom');

            $customIcon.style.backgroundImage = 'url(' + params.imageUrl + ')';
            show($customIcon);

            var _imgWidth = 80,
                _imgHeight = 80;

            if (params.imageSize) {
                var imgWidth = params.imageSize.split('x')[0];
                var imgHeight = params.imageSize.split('x')[1];

                if (!imgWidth || !imgHeight) {
                    window.console.error("Parameter imageSize expects value with format WIDTHxHEIGHT, got " + params.imageSize);
                } else {
                    _imgWidth = imgWidth;
                    _imgHeight = imgHeight;

                    $customIcon.css({
                        'width': imgWidth + 'px',
                        'height': imgHeight + 'px'
                    });
                }
            }
            $customIcon.setAttribute('style', $customIcon.getAttribute('style') + 'width:' + _imgWidth + 'px; height:' + _imgHeight + 'px');
        }

        // Cancel button
        modal.setAttribute('data-has-cancel-button', params.showCancelButton);
        if (params.showCancelButton) {
            $cancelBtn.style.display = 'inline-block';
        } else {
            hide($cancelBtn);
        }

        // Edit text on cancel and confirm buttons
        if (params.cancelButtonText) {
            $cancelBtn.innerHTML = escapeHtml(params.cancelButtonText);
        }
        if (params.confirmButtonText) {
            $confirmBtn.innerHTML = escapeHtml(params.confirmButtonText);
        }

        // Set confirm button to selected background color
        $confirmBtn.style.backgroundColor = params.confirmButtonColor;

        // Set box-shadow to default focused button
        setFocusStyle($confirmBtn, params.confirmButtonColor);

        // Allow outside click?
        modal.setAttribute('data-allow-ouside-click', params.allowOutsideClick);

        // Done-function
        var hasDoneFunction = (params.doneFunction) ? true : false;
        modal.setAttribute('data-has-done-function', hasDoneFunction);

        // Close timer
        modal.setAttribute('data-timer', params.timer);
    }


    /*
     * Set hover, active and focus-states for buttons (source: http://www.sitepoint.com/javascript-generate-lighter-darker-color)
     */

    function colorLuminance(hex, lum) {
        // Validate hex string
        hex = String(hex).replace(/[^0-9a-f]/gi, '');
        if (hex.length < 6) {
            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        }
        lum = lum || 0;

        // Convert to decimal and change luminosity
        var rgb = "#", c, i;
        for (i = 0; i < 3; i++) {
            c = parseInt(hex.substr(i * 2, 2), 16);
            c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
            rgb += ("00" + c).substr(c.length);
        }

        return rgb;
    }

    function extend(a, b) {
        for (var key in b) {
            if (b.hasOwnProperty(key)) {
                a[key] = b[key];
            }
        }

        return a;
    }

    function hexToRgb(hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) : null;
    }

    // Add box-shadow style to button (depending on its chosen bg-color)
    function setFocusStyle($button, bgColor) {
        var rgbColor = hexToRgb(bgColor);
        $button.style.boxShadow = '0 0 2px rgba(' + rgbColor + ', 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)';
    }



    /*
     * Animations
     */

    function openModal() {
        var modal = getModal();
        fadeIn(getOverlay(), 10);
        show(modal);
        addClass(modal, 'showSweetAlert');
        removeClass(modal, 'hideSweetAlert');

        previousActiveElement = document.activeElement;
        var $okButton = modal.querySelector('button.confirm');
        $okButton.focus();

        setTimeout(function () {
            addClass(modal, 'visible');
        }, 500);

        var timer = modal.getAttribute('data-timer');

        if (timer !== "null" && timer !== "") {
            modal.timeout = setTimeout(function () {
                closeModal();
            }, timer);
        }
    }

    function closeModal() {
        var modal = getModal();
        fadeOut(getOverlay(), 5);
        fadeOut(modal, 5);
        removeClass(modal, 'showSweetAlert');
        addClass(modal, 'hideSweetAlert');
        removeClass(modal, 'visible');


        // Reset icon animations

        var $successIcon = modal.querySelector('.icon.success');
        removeClass($successIcon, 'animate');
        removeClass($successIcon.querySelector('.tip'), 'animateSuccessTip');
        removeClass($successIcon.querySelector('.long'), 'animateSuccessLong');

        var $errorIcon = modal.querySelector('.icon.error');
        removeClass($errorIcon, 'animateErrorIcon');
        removeClass($errorIcon.querySelector('.x-mark'), 'animateXMark');

        var $warningIcon = modal.querySelector('.icon.warning');
        removeClass($warningIcon, 'pulseWarning');
        removeClass($warningIcon.querySelector('.body'), 'pulseWarningIns');
        removeClass($warningIcon.querySelector('.dot'), 'pulseWarningIns');


        // Reset the page to its previous state
        window.onkeydown = previousWindowKeyDown;
        document.onclick = previousDocumentClick;
        if (previousActiveElement) {
            previousActiveElement.focus();
        }
        lastFocusedButton = undefined;
        clearTimeout(modal.timeout);
    }


    /*
     * Set "margin-top"-property on modal based on its computed height
     */

    function fixVerticalPosition() {
        var modal = getModal();

        modal.style.marginTop = getTopMargin(getModal());
    }



    /*
     * If library is injected after page has loaded
     */

    (function () {
        if (document.readyState === "complete" || document.readyState === "interactive" && document.body) {
            window.sweetAlertInitialize();
        } else {
            if (document.addEventListener) {
                document.addEventListener('DOMContentLoaded', function factorial() {
                    document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                    window.sweetAlertInitialize();
                }, false);
            } else if (document.attachEvent) {
                document.attachEvent('onreadystatechange', function () {
                    if (document.readyState === 'complete') {
                        document.detachEvent('onreadystatechange', arguments.callee);
                        window.sweetAlertInitialize();
                    }
                });
            }
        }
    })();

})(window, document);

包含所有彈出方式代碼

效果圖

代碼

swal({   
title: "Are you sure?",   
text: "You will not be able to recover this imaginary file!",   
type: "warning",  
showCancelButton: true,   
confirmButtonText: "Yes, delete it!",   
closeOnConfirm: true,   
closeOnCancel: true
}, 
function(isConfirm){   
if (isConfirm) {     
swal("Deleted!", "Your imaginary file has been deleted.", "success");   
} 
else {     
swal("Cancelled", "Your imaginary file is safe :)", "error");   
}
 });