zettapi_client

<!doctype html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> <title>SweetAlert2 - supported fork of t4t5/sweetalert</title> <link rel="icon" href="./docs/favicon.png"> <link rel="apple-touch-icon" href="./docs/apple-touch-icon.png"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Courgette"> <link rel="stylesheet" href="./docs/example.css"> <link rel="stylesheet" href="./docs/buttons.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>  <script src="https://cdn.jsdelivr.net/es6-promise/latest/es6-promise.min.js"></script>  <script src="./dist/sweetalert2.js"></script> <link rel="stylesheet" href="./dist/sweetalert2.min.css">  </head> <body> <header> <h1>SweetAlert2</h1> <h2>A beautiful and customizable replacement for JavaScript's popup boxes</h2> <h2>Supported fork of t4t5/sweetalert</h2> <script src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=limontegithubiosweetalert2" id="_carbonads_js" async></script> <a class="top-right-button download">Download</a> <a href="http://www.jsdelivr.com/projects/sweetalert2" class="top-right-button cdn">CDN</a> </header> Here’s a comparison of a standard error message. The first one uses the built-in alert-function, while the second is using SweetAlert2. <div class="showcase normal"> <h4>Normal alert</h4> <button>Show error message</button> <h5>Code:</h5> <pre>alert('Oops! Something went wrong!')</pre> <div class="vs-icon"></div> </div> <div class="showcase sweet"> <h4>SweetAlert2</h4> <button>Show error message</button> <h5>Code:</h5> <pre> sweetAlert( 'Oops...', 'Something went wrong!', 'error' )</pre> </div> Pretty cool huh? SweetAlert2 automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!  <h3>More examples</h3> In these examples, we're using the shorthand function swal. <ul class="examples"> <li class="message"> <div class="ui"> A basic message <button>Try me!</button> </div> <pre>swal('Any fool can use a computer')</pre> </li> <li class="title-text"> <div class="ui"> A title with a text under <button>Try me!</button> </div> <pre> swal( 'The Internet?', 'That thing is still around?', 'question' )</pre> </li> <li class="success"> <div class="ui"> A success message! <button>Try me!</button> </div> <pre> swal( 'Good job!', 'You clicked the button!', 'success' )</pre> </li> <li class="timer"> <div class="ui"> A message with auto close timer <button>Try me!</button> </div> <pre> swal({ title: 'Auto close alert!', text: 'I will close in 2 seconds.', timer: 2000 })</pre> </li> <li class="html"> <div class="ui"> Custom HTML description and buttons <button>Try me!</button> </div> <pre> swal({ title: 'HTML example', type: 'info', html: 'You can use bold text, ' + '<a href="//github.com">links</a> ' + 'and other HTML tags', showCloseButton: true, showCancelButton: true, confirmButtonText: ' Great!', cancelButtonText: '' })</pre> </li> <li class="html-jquery"> <div class="ui"> jQuery HTML <button>Try me!</button> </div> <pre> swal({ title: 'jQuery HTML example', html: $('<div>') .addClass('some-class') .text('jQuery is everywhere.') })</pre> </li> <li class="warning confirm"> <div class="ui"> A warning message, with a function attached to the "Confirm"-button... <button>Try me!</button> </div> <pre> swal({ title: 'Are you sure?', text: "You won't be able to revert this!", type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then(function() { swal( 'Deleted!', 'Your file has been deleted.', 'success' ); })</pre> </li> <li class="warning cancel" id="dismiss-handle"> <div class="ui"> ... and by passing a parameter, you can execute something else for "Cancel". <button>Try me!</button> </div> <pre> swal({ title: 'Are you sure?', text: "You won't be able to revert this!", type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel!', confirmButtonClass: 'btn btn-success', cancelButtonClass: 'btn btn-danger', buttonsStyling: false }).then(function() { swal( 'Deleted!', 'Your file has been deleted.', 'success' ); }, function(dismiss) { // dismiss can be 'cancel', 'overlay', 'close', 'timer' if (dismiss === 'cancel') { swal( 'Cancelled', 'Your imaginary file is safe :)', 'error' ); } })</pre> </li> <li class="custom-image"> <div class="ui"> A message with a custom image and CSS animation disabled <button>Try me!</button> </div> <pre> swal({ title: 'Sweet!', text: 'Modal with a custom image.', imageUrl: 'https://unsplash.it/400/200', imageWidth: 400, imageHeight: 200, animation: false })</pre> </li> <li class="custom-width-padding-background"> <div class="ui"> A message with custom width, padding and background <button>Try me!</button> </div> <pre> swal({ title: 'Custom width, padding, background.', width: 600, padding: 100, background: '#fff url(//bit.ly/1Nqn9HU)' })</pre> </li> <li class="ajax-request" id="ajax-request"> <div class="ui"> Ajax request example <button>Try me!</button> </div> <pre> swal({ title: 'Submit email to run ajax request', input: 'email', showCancelButton: true, confirmButtonText: 'Submit', showLoaderOnConfirm: true, preConfirm: function(email) { return new Promise(function(resolve, reject) { setTimeout(function() { if (email === 'taken@example.com') { reject('This email is already taken.'); } else { resolve(); } }, 2000); }); }, allowOutsideClick: false }).then(function(email) { swal({ type: 'success', title: 'Ajax request finished!', html: 'Submitted email: ' + email }); })</pre> </li> <li class="chaining-modals" id="chaining-modals"> <div class="ui"> Chaining modals (queue) example <button>Try me!</button> </div> <pre> swal.setDefaults({ confirmButtonText: 'Next &rarr;', showCancelButton: true, animation: false, progressSteps: ['1', '2', '3'] }); var steps = [ { title: 'Step 1', text: 'Chaining swal2 modals is easy' }, 'Step 2', 'Step 3' ]; swal.queue(steps).then(function() { swal({ title: 'All done!', confirmButtonText: 'Lovely!', showCancelButton: false }); swal.resetDefaults(); }, function() { swal.resetDefaults(); })</pre> </li> <li class="dynamic-queue" id="dynamic-queue"> <div class="ui"> Dynamic queue example <button>Try me!</button> </div> <pre> swal.queue([{ title: 'Your public IP', confirmButtonText: 'Show my public IP', text: 'Your public IP will be received ' + 'via AJAX request', showLoaderOnConfirm: true, preConfirm: function() { return new Promise(function(resolve) { $.get('https://api.ipify.org?format=json') .done(function(data) { swal.insertQueueStep(data.ip); resolve(); }); }); } }])</pre> </li> </ul>  <h3 class="download-section">Download & install</h3> <div class="center-container"> <pre class="center">$ bower install sweetalert2</pre> Or <pre class="center">$ npm install sweetalert2</pre> Or download from CDN: <a href="https://www.jsdelivr.com/projects/sweetalert2">jsdelivr.com/sweetalert2</a> </div> <ol> <li> Initialize the plugin by referencing the necessary files: <pre> <script src="bower_components/es6-promise/es6-promise.min.js"></script> <script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script> <link rel="stylesheet" href="bower_components/sweetalert2/dist/sweetalert2.min.css"></pre> </li> <li> Call the sweetAlert2-function after the page has loaded <pre> swal({ title: 'Error!', text: 'Do you want to continue', type: 'error', confirmButtonText: 'Cool' })</pre> </li> </ol> <div class="mobile-hidden">  <h3>Configuration</h3> Here are the keys that you can use if you pass an object into sweetAlert2: <table> <tr class="titles"> <th> Argument </th> <th>Default value</th> <th> Description </th> </tr> <tr> <td>title</td> <td>null</td> <td>The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function.</td> </tr> <tr> <td>text</td> <td>null</td> <td>A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function.</td> </tr> <tr> <td>html</td> <td>null</td> <td>A HTML description for the modal. If "text" and "html" parameters are provided in the same time, "text" will be used.</td> </tr> <tr> <td>type</td> <td>null</td> <td>The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warning, error, success, info and question. It can either be put in the array under the key "type" or passed as the third parameter of the function.</td> </tr> <tr id="input-parameter"> <td>input</td> <td>null</td> <td> Input field type, can be text, email, password, number, tel, range, textarea, select, radio, checkbox and file. </td> </tr> <tr> <td>width</td> <td>"500px"</td> <td>Modal window width, including paddings (box-sizing: border-box). Can be in `px` or `%`.</td> </tr> <tr> <td>padding</td> <td>20</td> <td>Modal window padding.</td> </tr> <tr> <td>background</td> <td>"#fff"</td> <td>Modal window background (CSS background property).</td> </tr> <tr> <td>customClass</td> <td>null</td> <td>A custom CSS class for the modal.</td> </tr> <tr> <td>timer</td> <td>null</td> <td>Auto close timer of the modal. Set in ms (milliseconds).</td> </tr> <tr> <td>animation</td> <td>true</td> <td>If set to false, modal CSS animation will be disabled.</td> </tr> <tr> <td>allowOutsideClick</td> <td>true</td> <td>If set to false, the user can't dismiss the modal by clicking outside it.</td> </tr> <tr> <td>allowEscapeKey</td> <td>true</td> <td>If set to false, the user can't dismiss the modal by pressing the Escape key.</td> </tr> <tr> <td>showConfirmButton</td> <td>true</td> <td>If set to false, a "Confirm"-button will not be shown. It can be useful when you're using custom HTML description.</td> </tr> <tr> <td>showCancelButton</td> <td>false</td> <td>If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.</td> </tr> <tr> <td>confirmButtonText</td> <td>"OK"</td> <td>Use this to change the text on the "Confirm"-button.</td> </tr> <tr> <td>cancelButtonText</td> <td>"Cancel"</td> <td>Use this to change the text on the "Cancel"-button.</td> </tr> <tr> <td>confirmButtonColor</td> <td>"#3085d6"</td> <td>Use this to change the background color of the "Confirm"-button (must be a HEX value).</td> </tr> <tr> <td>cancelButtonColor</td> <td>"#aaa"</td> <td>Use this to change the background color of the "Cancel"-button (must be a HEX value).</td> </tr> <tr> <td>confirmButtonClass</td> <td>null</td> <td>A custom CSS class for the "Confirm"-button.</td> </tr> <tr> <td>cancelButtonClass</td> <td>null</td> <td>A custom CSS class for the "Cancel"-button.</td> </tr> <tr> <td>buttonsStyling</td> <td>true</td> <td>Apply default swal2 styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false.</td> </tr> <tr> <td>reverseButtons</td> <td>false</td> <td>Set to true if you want to invert default buttons positions.</td> </tr> <tr> <td>focusCancel</td> <td>false</td> <td>Set to true if you want to focus the "Cancel"-button by default.</td> </tr> <tr> <td>showCloseButton</td> <td>false</td> <td>Set to true to show close button in top right corner of the modal.</td> </tr> <tr> <td>showLoaderOnConfirm</td> <td>false</td> <td>Set to true to disable buttons and show that something is loading. Useful for AJAX requests.</td> </tr> <tr> <td>preConfirm</td> <td>null</td> <td>Function to execute before confirm, should return Promise, see <a href="#ajax-request">usage example</a>.</td> </tr> <tr> <td>imageUrl</td> <td>null</td> <td>Add a customized icon for the modal. Should contain a string with the path or URL to the image.</td> </tr> <tr> <td>imageWidth</td> <td>null</td> <td>If imageUrl is set, you can specify imageWidth to describes image width in px.</td> </tr> <tr> <td>imageHeight</td> <td>null</td> <td>Custom image height in px.</td> </tr> <tr> <td>imageClass</td> <td>null</td> <td>A custom CSS class for the customized icon.</td> </tr> <tr> <td>inputPlaceholder</td> <td>""</td> <td>Input field placeholder.</td> </tr> <tr> <td>inputValue</td> <td>""</td> <td>Input field initial value.</td> </tr> <tr> <td>inputOptions</td> <td>{} or Promise</td> <td>If input parameter is set to "select" or "radio", you can provide options. Object keys will represent options values, object values will represent options text values.</td> </tr> <tr> <td>inputAutoTrim</td> <td>true</td> <td>Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming.</td> </tr> <tr> <td>inputValidator</td> <td>null</td> <td>Validator for input field, should return Promise, see <a href="#select-box">usage example</a>.</td> </tr> <tr> <td>inputClass</td> <td>null</td> <td>A custom CSS class for the input field.</td> </tr> <tr> <td>progressSteps</td> <td>[]</td> <td>Progress steps, useful for modal queues, see <a href="#chaining-modals">usage example</a>.</td> </tr> <tr> <td>currentProgressStep</td> <td>null</td> <td>Current active progress step. The default is swal.getQueueStep()</td> </tr> <tr> <td>progressStepsDistance</td> <td>"40px"</td> <td>Distance between progress steps.</td> </tr> <tr> <td>onOpen</td> <td>null</td> <td>Function to run when modal opens, provides modal DOM element as the first argument.</td> </tr> <tr> <td>onClose</td> <td>null</td> <td>Function to run when modal closes, provides modal DOM element as the first argument.</td> </tr> </table> You can redefine default params by using swal.setDefaults(customParams). </div>  <h3>Modal Types</h3> <table class="modal-types"> <tr> <td>success</td> <td><div class="swal2-icon swal2-success"> <div class="placeholder"></div></div></td> <td><button class="type-success">Try me!</button></td> </tr> <tr> <td>error</td> <td><div class="swal2-icon swal2-error"></div></td> <td><button class="type-error">Try me!</button></td> </tr> <tr> <td>warning</td> <td><div class="swal2-icon swal2-warning">!</div></td> <td><button class="type-warning">Try me!</button></td> </tr> <tr> <td>info</td> <td><div class="swal2-icon swal2-info">i</div></td> <td><button class="type-info">Try me!</button></td> </tr> <tr> <td>question</td> <td><div class="swal2-icon swal2-question">?</div></td> <td><button class="type-question">Try me!</button></td> </tr> </table>  <h3>Input Types</h3> <table class="modal-input-types"> <tr id="input-field"> <td>text</td> <td> <pre> swal({ title: 'Input something', input: 'text', showCancelButton: true, inputValidator: function(value) { return new Promise(function(resolve, reject) { if (value) { resolve(); } else { reject('You need to write something!'); } }); } }).then(function(result) { swal({ type: 'success', html: 'You entered: ' + result }); })</pre> </td> <td><button class="input-type-text">Try me!</button></td> </tr> <tr id="input-email"> <td>email</td> <td> <pre> swal({ title: 'Input email address', input: 'email' }).then(function(email) { swal({ type: 'success', html: 'Entered email: ' + email }); })</pre> </td> <td><button class="input-type-email">Try me!</button></td> </tr> <tr id="input-password"> <td>password</td> <td> <pre> swal({ title: 'Enter your password', input: 'password', inputAttributes: { 'maxlength': 10, 'autocapitalize': 'off', 'autocorrect': 'off' } }).then(function(password) { if (password) { swal({ type: 'success', html: 'Entered password: ' + password }); } })</pre> </td> <td><button class="input-type-password">Try me!</button></td> </tr> <tr id="input-textarea"> <td>textarea</td> <td> <pre> swal({ input: 'textarea', showCancelButton: true }).then(function(text) { if (text) { swal(text); } })</pre> </td> <td><button class="input-type-textarea">Try me!</button></td> </tr> <tr id="select-box"> <td>select</td> <td> <pre> swal({ title: 'Select Ukraine', input: 'select', inputOptions: { 'SRB': 'Serbia', 'UKR': 'Ukraine', 'HRV': 'Croatia' }, inputPlaceholder: 'Select country', showCancelButton: true, inputValidator: function(value) { return new Promise(function(resolve, reject) { if (value === 'UKR') { resolve(); } else { reject('You need to select Ukraine :)'); } }); } }).then(function(result) { swal({ type: 'success', html: 'You selected: ' + result }); })</pre> </td> <td><button class="input-type-select">Try me!</button></td> </tr> <tr id="radio-inputs"> <td>radio</td> <td> <pre> // inputOptions can be an object or Promise var inputOptions = new Promise(function(resolve) { setTimeout(function() { resolve({ '#ff0000': 'Red', '#00ff00': 'Green', '#0000ff': 'Blue' }); }, 2000); }); swal({ title: 'Select color', input: 'radio', inputOptions: inputOptions, inputValidator: function(result) { return new Promise(function(resolve, reject) { if (result) { resolve(); } else { reject('You need to select something!'); } }); } }).then(function(result) { swal({ type: 'success', html: 'You selected: ' + result }); })</pre> </td> <td><button class="input-type-radio">Try me!</button></td> </tr> <tr id="checkbox"> <td>checkbox</td> <td> <pre> swal({ title: 'Terms and conditions', input: 'checkbox', inputValue: 1, inputPlaceholder: 'I agree with the terms and conditions', confirmButtonText: 'Continue ', inputValidator: function(result) { return new Promise(function(resolve, reject) { if (result) { resolve(); } else { reject('You need to agree with T&C'); } }); } }).then(function(result) { swal({ type: 'success', text: 'You agreed with T&C :)' }); })</pre> </td> <td><button class="input-type-checkbox">Try me!</button></td> </tr> <tr id="input-file"> <td>file</td> <td> <pre> swal({ title: 'Select image', input: 'file', inputAttributes: { accept: 'image/*' } }).then(function(file) { var reader = new FileReader; reader.onload = function(e) { swal({ imageUrl: e.target.result }); }; reader.readAsDataURL(file); })</pre> </td> <td><button class="input-type-file">Try me!</button></td> </tr> <tr id="input-range"> <td>range</td> <td> <pre> swal({ title: 'How old are you?', type: 'question', input: 'range', inputAttributes: { min: 8, max: 120, step: 1 }, inputValue: 25 })</pre> </td> <td><button class="input-type-range">Try me!</button></td> </tr> </table> <div class="mobile-hidden"> Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters. Inside the preConfirm() function you can pass the custom result to the resolve() function as a parameter: <table class="modal-input-types"> <tr id="multiple-inputs"> <td></td> <td> <pre> swal({ title: 'Multiple inputs', html: '<input id="swal-input1" class="swal2-input" autofocus>' + '<input id="swal-input2" class="swal2-input">', preConfirm: function() { return new Promise(function(resolve) { if (result) { resolve([ $('#swal-input1').val(), $('#swal-input2').val() ]); } }); } }).then(function(result) { swal(JSON.stringify(result)); })</pre> </td> <td><button class="input-type-multiple">Try me!</button></td> </tr> </table>  <h3>Methods</h3> <table> <tr class="titles"> <th> Method </th> <th> Description </th> </tr> <tr> <td>swal.isVisible()</td> <td>Determine if modal is shown.</td> </tr> <tr> <td>swal.setDefaults({Object})</td> <td>If you end up using a lot of the same settings when calling SweetAlert2, you can use setDefaults at the start of your program to set them once and for all!</td> </tr> <tr> <td>swal.resetDefaults()</td> <td>Resets settings to their default value.</td> </tr> <tr> <td>swal.close() or swal.closeModal()</td> <td>Close the currently open SweetAlert2 modal programmatically.</td> </tr> <tr> <td>swal.enableButtons()</td> <td>Enable "Confirm" and "Cancel" buttons.</td> </tr> <tr> <td>swal.disableButtons()</td> <td>Disable "Confirm" and "Cancel" buttons.</td> </tr> <tr> <td>swal.enableConfirmButton()</td> <td>Enable the "Confirm"-button only.</td> </tr> <tr> <td>swal.disableConfirmButton()</td> <td>Disable the "Confirm"-button only.</td> </tr> <tr> <td>swal.showLoading() or swal.enableLoading()</td> <td>Disable buttons and show loader. This is useful with AJAX requests.</td> </tr> <tr> <td>swal.hideLoading() or swal.disableLoading()</td> <td>Enable buttons and hide loader.</td> </tr> <tr> <td>swal.clickConfirm()</td> <td>Click the "Confirm"-button programmatically.</td> </tr> <tr> <td>swal.clickCancel()</td> <td>Click the "Cancel"-button programmatically.</td> </tr> <tr> <td>swal.showValidationError(error)</td> <td>Show validation error message.</td> </tr> <tr> <td>swal.resetValidationError()</td> <td>Hide validation error message.</td> </tr> <tr> <td>swal.enableInput()</td> <td>Enable input, this method works with <a href="#input-parameter">input parameter</a>.</td> </tr> <tr> <td>swal.disableInput()</td> <td>Disable input.</td> </tr> <tr> <td>swal.queue([Array])</td> <td>Provide array of SweetAlert2 parameters to show multiple modals, one modal after another. See <a href="#chaining-modals">usage example</a></td> </tr> <tr> <td>swal.getQueueStep()</td> <td>Get the index of current modal in queue. When there's no active queue, null will be returned.</td> </tr> <tr> <td>swal.insertQueueStep()</td> <td>Insert a modal to queue, you can specify modal positioning with second parameter. By default a modal will be added to the end of a queue.</td> </tr> <tr> <td>swal.deleteQueueStep(index)</td> <td>Delete a modal at index from queue.</td> </tr> <tr> <td>swal.getProgressSteps()</td> <td>Progress steps getter.</td> </tr> <tr> <td>swal.setProgressSteps([])</td> <td>Progress steps setter.</td> </tr> <tr> <td>swal.showProgressSteps()</td> <td>Show progress steps.</td> </tr> <tr> <td>swal.hideProgressSteps()</td> <td>Hide progress steps.</td> </tr> </table> </div>  <h3>Contribute</h3> Feel free to fork SweetAlert2 on <a href="https://github.com/limonte/sweetalert2" class="github">GitHub</a> if you have any features that you want to add!  <a href="https://github.com/limonte/sweetalert2" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> <script> $('.download').on('click', function() { $('html, body').animate({scrollTop: $('.download-section').offset().top}, 1000); }); $('.showcase.normal button').on('click', function() { window.alert('Oops! Something went wrong!'); }); $('.showcase.sweet button').on('click', function() { swal('Oops...', 'Something went wrong!', 'error').done(); }); $('.examples .message button').on('click', function() { swal('Any fool can use a computer').done(); }); $('.examples .timer button').on('click', function() { swal({ title: 'Auto close alert!', text: 'I will close in 2 seconds.', timer: 2000 }).done(); }); $('.examples .html button').on('click', function() { swal({ title: 'HTML example', type: 'info', html: 'You can use bold text, ' + '<a href="//github.com">links</a> ' + 'and other HTML tags', showCloseButton: true, showCancelButton: true, confirmButtonText: ' Great!', cancelButtonText: '' }).done(); }); $('.examples .html-jquery button').on('click', function() { swal({ title: 'jQuery HTML example', html: $('<div>').addClass('some-class').text('jQuery is everywhere.') }).done(); }); $('.examples .title-text button').on('click', function() { swal('The Internet?', 'That thing is still around?', 'question').done(); }); $('.examples .success button').on('click', function() { swal('Good job!', 'You clicked the button!', 'success').done(); }); $('.examples .warning.confirm button').on('click', function() { swal({ title: 'Are you sure?', text: 'You won\'t be able to revert this!', type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then(function() { swal('Deleted!', 'Your file has been deleted!', 'success'); }).done(); }); $('.examples .warning.cancel button').on('click', function() { swal({ title: 'Are you sure?', text: 'Buttons below are styled with Bootstrap classes', type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel!', confirmButtonClass: 'btn btn-success', cancelButtonClass: 'btn btn-danger', buttonsStyling: false }).then(function() { swal('Deleted!', 'Your file has been deleted!', 'success'); }, function(dismiss) { // dismiss can be 'cancel', 'overlay', 'close', 'timer' if (dismiss === 'cancel') { swal('Cancelled', 'Your imaginary file is safe :)', 'error'); } }); }); $('.examples .custom-image button').on('click', function() { swal({ title: 'Sweet!', text: 'Modal with a custom image.', imageUrl: 'https://unsplash.it/400/200/?random', imageWidth: 400, imageHeight: 200, animation: false }).done(); }); $('.examples .custom-width-padding-background button').on('click', function() { swal({ title: 'Custom width, padding, background.', width: 600, padding: 100, background: '#fff url(https://bit.ly/1Nqn9HU)' }).done(); }); $('.input-type-text').on('click', function() { swal({ title: 'Input something', input: 'text', showCancelButton: true, inputValidator: function(value) { return new Promise(function(resolve, reject) { if (value) { resolve(); } else { reject('You need to write something!'); } }); } }).then(function(result) { swal({ type: 'success', html: 'You entered: ' + result + '' }); }).done(); }); $('.input-type-email').on('click', function() { swal({ title: 'Input email address', input: 'email' }).then(function(email) { swal({ type: 'success', html: 'Entered email: ' + email + '' }); }).done(); }); $('.input-type-password').on('click', function() { swal({ title: 'Enter your password', input: 'password', inputAttributes: { 'maxlength': 10, 'autocapitalize': 'off', 'autocorrect': 'off' } }).then(function(password) { if (password) { swal({ type: 'success', html: 'Entered password: ' + password + '' }); } }).done(); }); $('.input-type-textarea').on('click', function() { swal({ input: 'textarea', showCancelButton: true }).then(function(text) { if (text) { swal(text); } }).done(); }); $('.input-type-select').on('click', function() { swal({ title: 'Select Ukraine', input: 'select', inputOptions: { 'SRB': 'Serbia', 'UKR': 'Ukraine', 'HRV': 'Croatia' }, inputPlaceholder: 'Select country', showCancelButton: true, inputValidator: function(value) { return new Promise(function(resolve, reject) { if (value === 'UKR') { resolve(); } else { reject('You need to select Ukraine :)'); } }); } }).then(function(result) { swal({ type: 'success', html: 'You selected: ' + result + '' }); }).done(); }); $('.input-type-radio').on('click', function() { var inputOptions = new Promise(function(resolve) { setTimeout(function() { resolve({ '#FF0000': 'Red', '#00FF00': 'Green', '#0000FF': 'Blue' }); }, 2000); }); swal({ title: 'Select color', input: 'radio', inputOptions: inputOptions, inputValidator: function(value) { return new Promise(function(resolve, reject) { if (value) { resolve(); } else { reject('You need to choose something!'); } }); } }).then(function(result) { swal({ type: 'success', html: 'You selected: ' + result + '' }); }).done(); }); $('.input-type-checkbox').on('click', function() { swal({ title: 'Terms and conditions', input: 'checkbox', inputValue: 1, inputClass: 'aaa', inputPlaceholder: 'I agree with the terms and conditions', confirmButtonText: 'Continue ', inputValidator: function(result) { return new Promise(function(resolve, reject) { if (result) { resolve(); } else { reject('To continue you need to agree with T&C'); } }); } }).then(function() { swal({ type: 'success', text: 'You agreed with T&C :)' }); }).done(); }); $('.input-type-file').on('click', function() { swal({ title: 'Select image', input: 'file', inputAttributes: { accept: 'image/*' } }).then(function(file) { var reader = new FileReader(); reader.onload = function(e) { swal({ imageUrl: e.target.result }); }; reader.readAsDataURL(file); }).done(); }); $('.input-type-range').on('click', function() { swal({ title: 'How old are you?', type: 'question', input: 'range', inputAttributes: { min: 8, max: 120, step: 1 }, inputValue: 25 }).done(); }); $('.input-type-multiple').on('click', function() { swal({ title: 'Multiple inputs', html: '<input id="swal-input1" class="swal2-input" autofocus><input id="swal-input2" class="swal2-input">', preConfirm: function() { return new Promise(function(resolve) { resolve([ $('#swal-input1').val(), $('#swal-input2').val() ]); }); } }).then(function(result) { swal(JSON.stringify(result)); }).done(); }); $('.examples .ajax-request button').on('click', function() { swal({ title: 'Submit email to run ajax request', input: 'email', showCancelButton: true, confirmButtonText: 'Submit', width: 600, showLoaderOnConfirm: true, preConfirm: function(email) { return new Promise(function(resolve, reject) { setTimeout(function() { if (email === 'taken@example.com') { reject('This email is already taken.'); } else { resolve(); } }, 2000); }); }, allowOutsideClick: false }).then(function(email) { swal({ type: 'success', title: 'Ajax request finished!', html: 'Submitted email: ' + '' + email + '' }); }).done(); }); $('.examples .chaining-modals button').on('click', function() { swal.setDefaults({ confirmButtonText: 'Next →', showCancelButton: true, animation: false, progressSteps: ['1', '2', '3'] }); var steps = [ {title: 'Step 1', text: 'Chaining swal2 modals is easy'}, 'Step 2', 'Step 3' ]; swal.queue(steps).then(function() { swal({title: 'All done!', confirmButtonText: 'Lovely!', showCancelButton: false}); swal.resetDefaults(); }, function() { swal.resetDefaults(); }); }); $('.examples .dynamic-queue button').on('click', function() { swal.queue([ { title: 'Your public IP', confirmButtonText: 'Show my public IP', text: 'Your public IP will be received via AJAX request', currentProgressStep: 0, showLoaderOnConfirm: true, preConfirm: function() { return new Promise(function(resolve) { $.get('https://api.ipify.org?format=json') .done(function(data) { swal.insertQueueStep(data.ip); resolve(); }); }); } } ]).done(); }); $('.modal-types button').on('click', function() { var type = $(this).attr('class').slice(5); swal(type + '!', '', type).done(); }); // Google Analytics /*eslint-disable */ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-83618163-1', 'auto'); ga('send', 'pageview'); </script> </body>