SwwetAlert消息提示插件,支持手机移动响应式替换alert漂亮的消息提示插件

SwwetAlert

语法参考

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);

浏览器兼容

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");
}
});