{"id":7656,"date":"2015-09-25T00:27:56","date_gmt":"2015-09-25T00:27:56","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/09\/25\/t4t5-sweetalert\/"},"modified":"2015-09-25T00:27:56","modified_gmt":"2015-09-25T00:27:56","slug":"t4t5-sweetalert","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/09\/25\/t4t5-sweetalert\/","title":{"rendered":"t4t5\/sweetalert"},"content":{"rendered":"

An awesome replacement for JavaScript\u2019s alert.<\/p>\n

<\/p>\n

See it in action!<\/p>\n

Learn how to use it!<\/p>\n

Usage<\/h2>\n

You can install SweetAlert through bower:<\/p>\n

bower install sweetalert\n<\/code><\/pre>\n
Or through npm:<\/p>\n
npm install sweetalert\n<\/code><\/pre>\n
Alternatively, download the package and reference the JavaScript and CSS files manually:<\/p>\n
\n\n<\/code><\/pre>\n
Note:<\/strong> If you\u2019re using an older version than v1.0.0, the files are lib\/sweet-alert.min.js<\/code> and lib\/sweet-alert.css<\/code><\/p>\n
Tutorial<\/h2>\n
The easiest way to get started is follow the SweetAlert tutorial on Ludu!<\/p>\n
Examples<\/h2>\n
The most basic message:<\/p>\n
sweetAlert(\"Hello world!\");\n<\/code><\/pre>\n
A message signaling an error:<\/p>\n
sweetAlert(\"Oops...\", \"Something went wrong!\", \"error\");\n<\/code><\/pre>\n
A warning message, with a function attached to the \u201cConfirm\u201d-button:<\/p>\n
sweetAlert({\n  title: \"Are you sure?\",\n  text: \"You will not be able to recover this imaginary file!\",\n  type: \"warning\",\n  showCancelButton: true,\n  confirmButtonColor: \"#DD6B55\",\n  confirmButtonText: \"Yes, delete it!\",\n  closeOnConfirm: false,\n  html: false\n}, function(){\n  swal(\"Deleted!\",\n  \"Your imaginary file has been deleted.\",\n  \"success\");\n});\n<\/code><\/pre>\n
A prompt modal where the user\u2019s input is logged:<\/p>\n
sweerAlert({\n  title: \"An input!\",\n  text: 'Write something interesting:',\n  type: 'input',\n  showCancelButton: true,\n  closeOnConfirm: false,\n  animation: \"slide-from-top\"\n}, function(inputValue){\n  console.log(\"You wrote\", inputValue);   \n});\n<\/code><\/pre>\n
View more examples<\/p>\n
Themes<\/h2>\n
SweetAlert can easily be themed to fit your site\u2019s design. SweetAlert comes with three example themes that you can try out: facebook<\/strong>, twitter<\/strong> and google<\/strong>. They can be referenced right after the intial sweetalert-CSS:<\/p>\n
\n\n<\/code><\/pre>\n
Browser compatibility<\/h2>\n
SweetAlert works in most major browsers (yes, even IE). Some details:<\/p>\n
    \n
  • IE8<\/strong>: (Dropped since v1.0.0-beta)<\/li>\n
  • IE9<\/strong>: Works, but icons are not animated.<\/li>\n
  • IE10+<\/strong>: Works!<\/li>\n
  • Safari 4+<\/strong>: Works!<\/li>\n
  • Firefox 3+<\/strong>: Works!<\/li>\n
  • Chrome 14+<\/strong>: Works!<\/li>\n
  • Opera 15+<\/strong>: Works!<\/li>\n<\/ul>\n
    Contributing<\/h2>\n
    If you want to contribute:<\/p>\n
      \n
    • \n
      Fork the repo<\/p>\n<\/li>\n
    • \n
      Make sure you have Node, NPM and Gulp installed. When in the SweetAlert directory, run npm install<\/code> to install the dependencies. Then run gulp<\/code> while working to automatically minify the SCSS and JS-files.<\/p>\n<\/li>\n
    • \n
      Keep in min that SweetAlert uses Browserify in order to compile ES6-files. For easy debugging, make sure you reference the file dist\/sweetalert-dev.js<\/code> instead of sweetalert.js<\/code>.<\/p>\n<\/li>\n
    • \n
      After you\u2019re done, make a pull request and wait for approval! \ud83d\ude42<\/p>\n<\/li>\n<\/ul>\n
      Related projects<\/h2>\n","protected":false},"excerpt":{"rendered":"
      An awesome replacement for JavaScript\u2019s alert. See it in action! Learn how to use it! Usage You can install SweetAlert through bower: bower install sweetalert Or through npm: npm install sweetalert Alternatively, download the package and reference the JavaScript and CSS files manually: Note: If you\u2019re using an older version than v1.0.0, the files are […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7656","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7656"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7656\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}