Oops Try Again Make Sure You Modify Your Button s Onclick by Adding a Second Name
SugarinessAlert2
A beautiful, responsive, customizable, attainable (WAI-ARIA) replacement for JavaScript's popup boxes
Nothing dependencies
Download CDN 
Donate
Normal alert
alert('Oops! Something went wrong!')
SweetAlert2
swal( 'Oops...', 'Something went incorrect!', 'fault' )
Pretty cool huh? SweetAlert2 automatically centers itself on the page and looks neat no matter if you're using a desktop computer, mobile or tablet. It's fifty-fifty highly customizeable, as yous tin see below!
More than examples
-
swal('Whatever fool can use a reckoner') -
A title with a text under
swal( 'The Internet?', 'That thing is still around?', 'question' )
-
swal( 'Good job!', 'You clicked the button!', 'success' )
-
Custom HTML description and buttons with ARIA labels
swal({ title: '<i>HTML</i> <u>case</u>', type: 'info', html: 'You can utilize <b>bold text</b>, ' + '<a href="//github.com">links</a> ' + 'and other HTML tags', showCloseButton: truthful, showCancelButton: true, focusConfirm: false confirmButtonText: '<i class="fa fa-thumbs-up"></i> Peachy!', confirmButtonAriaLabel: 'Thumbs up, groovy!', cancelButtonText: '<i grade="fa fa-thumbs-downwardly"></i>', cancelButtonAriaLabel: 'Thumbs down', }) -
swal({ championship: 'jQuery HTML example', html: $('<div>') .addClass('some-class') .text('jQuery is everywhere.'), blitheness: false, customClass: 'blithe tada' }) -
A alarm bulletin, with a function fastened to the "Confirm"-button...
swal({ title: 'Are you sure?', text: "You won't be able to revert this!", type: 'alert', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete information technology!' }).then( role () { swal( 'Deleted!', 'Your file has been deleted.', 'success' ) }) -
... and by passing a parameter, you can execute something else for "Cancel".
swal({ championship: 'Are you sure?', text: "Y'all won't be able to revert this!", blazon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yeah, 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) { if (dismiss === 'cancel') { swal( 'Cancelled', 'Your imaginary file is safe :)', 'error' ) } }) -
A bulletin with a custom prototype and CSS animation disabled
swal({ title: 'Sweet!', text: 'Modal with a custom image.', imageUrl: 'https://unsplash.it/400/200', imageWidth: 400, imageHeight: 200, imageAlt: 'Custom prototype', animation: false }) -
A message with custom width, padding and background
swal({ title: 'Custom width, padding, background.', width: 600, padding: 100, background: '#fff url(//bit.ly/1Nqn9HU)' }) -
A message with auto close timer
swal({ title: 'Motorcar shut alert!', text: 'I will close in 5 seconds.', timer: 5000, onOpen: function () { swal.showLoading() } }).so( function () {}, part (dismiss) { if (dismiss === 'timer') { console.log('I was closed by the timer') } } ) -
swal({ title: 'Submit e-mail to run ajax asking', input: 'email', showCancelButton: true, confirmButtonText: 'Submit', showLoaderOnConfirm: truthful, preConfirm: office (email) { return new Promise( function (resolve, reject) { setTimeout(function() { if (email === 'taken@example.com') { reject('This email is already taken.') } else { resolve() } }, 2000) }) }, allowOutsideClick: simulated }).then( function (email) { swal({ type: 'success', championship: 'Ajax request finished!', html: 'Submitted email: ' + email }) }) -
Chaining modals (queue) example
swal.setDefaults({ input: 'text', confirmButtonText: 'Next →', showCancelButton: true, animation: false, progressSteps: ['i', 'ii', '3'] }) var steps = [ { championship: 'Question 1', text: 'Chaining swal2 modals is easy' }, 'Question ii', 'Question iii' ] swal.queue(steps).then( function (result) { swal.resetDefaults() swal({ title: 'All done!', html: 'Your answers: <pre>' + JSON.stringify(issue) + '</pre>', confirmButtonText: 'Lovely!' }) }, role () { swal.resetDefaults() }) -
swal.queue([{ title: 'Your public IP', confirmButtonText: 'Show my public IP', text: 'Your public IP will be received ' + 'via AJAX asking', showLoaderOnConfirm: truthful, preConfirm: function () { return new Hope( function (resolve) { $.get('https://api.ipify.org?format=json') .done( office (data) { swal.insertQueueStep(data.ip) resolve() }) }) } }])
Usage
1. Initialize the plugin by referencing the necessary files:
<script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script> <link rel="stylesheet" href="bower_components/sweetalert2/dist/sweetalert2.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.ane/core.js"></script>
Or
import swal from 'sweetalert2' const swal = crave('sweetalert2')
2. Call the sweetAlert2-function after the page has loaded
swal({ title: 'Error!', text: 'Do you want to continue', blazon: 'error', confirmButtonText: 'Absurd' }) Treatment Dismissals
When an warning is dismissed by the user, the Promise returned by swal() will reject with a string documenting the reason it was dismissed:
| String | Description | Related configuration |
|---|---|---|
| 'overlay' | The user clicked the overlay. | allowOutsideClick |
| 'cancel' | The user clicked the cancel button. | showCancelButton |
| 'close' | The user clicked the shut button. | showCloseButton |
| 'esc' | The user clicked the Esc cardinal. | allowEscapeKey |
| 'timer' | The timer ran out, and the alarm closed automatically. | timer |
If rejections are non handled, it will be logged as an mistake. To avoid this, add a rejection handler to the Promise.
Alternatively, yous can use .catch(swal.noop) as a quick way to simply suppress the errors:
swal(...) .catch(swal.noop)
Modal Types
| success | ||
| error | ||
| warning | ||
| info | ||
| question |
Input Types
| text | swal({ championship: 'What is your name?', input: 'text', inputPlaceholder: 'Enter your proper noun or nickname', showCancelButton: true, inputValidator: office (value) { return new Hope( function (resolve, decline) { if (value) { resolve() } else { reject('You lot demand to write something!') } }) } }).so( part (name) { swal({ type: 'success', title: 'Hi, ' + name }) }) | |
swal({ title: 'Input e-mail address', input: 'e-mail', inputPlaceholder: 'Enter your email address' }).then( function (email) { swal({ blazon: 'success', html: 'Entered electronic mail: ' + electronic mail }) }) | ||
| url | swal({ input: 'url', inputPlaceholder: 'Enter the URL' }).and then( part (url) { swal({ type: 'success', html: 'Entered URL: ' + url }) }) | |
| password | swal({ championship: 'Enter your password', input: 'countersign', inputPlaceholder: 'Enter your password', inputAttributes: { 'maxlength': x, 'autocapitalize': 'off', 'autocorrect': 'off' } }).then( role (password) { if (countersign) { swal({ blazon: 'success', html: 'Entered password: ' + countersign }) } }) | |
| textarea | swal({ input: 'textarea', inputPlaceholder: 'Type your message here', showCancelButton: truthful }).then( function (text) { if (text) { swal(text) } }) | |
| select | swal({ championship: 'Select Ukraine', input: 'select', inputOptions: { 'SRB': 'Serbia', 'UKR': 'Ukraine', 'HRV': 'Croatia' }, inputPlaceholder: 'Select country', showCancelButton: true, inputValidator: role (value) { return new Promise( function (resolve, reject) { if (value === 'UKR') { resolve() } else { reject('Y'all need to select Ukraine :)') } }) } }).then( part (result) { swal({ type: 'success', html: 'You selected: ' + result }) }) | |
| radio | var inputOptions = new Promise( role (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 (upshot) { resolve() } else { decline('You demand to select something!') } }) } }).then( office (result) { swal({ type: 'success', html: 'You lot selected: ' + result }) }) | |
| checkbox | swal({ title: 'Terms and conditions', input: 'checkbox', inputValue: one, inputPlaceholder: 'I agree with the terms and conditions', confirmButtonText: 'Go on <i grade="fa fa-arrow-right></i>', inputValidator: function (result) { render new Promise( role (resolve, reject) { if (result) { resolve() } else { turn down('You need to agree with T&C') } }) } }).so( function (event) { swal({ type: 'success', text: 'Y'all agreed with T&C :)' }) }) | |
| file | swal({ title: 'Select image', input: 'file', inputAttributes: { 'have': 'image/*', 'aria-label': 'Upload your profile moving-picture show' } }).and so( role (file) { var reader = new FileReader reader.onload = function (e) { swal({ title: 'Your uploaded pic' imageUrl: e.target.issue, imageAlt: 'The uploaded moving picture' }) } reader.readAsDataURL(file) }) | |
| range | swal({ title: 'How old are you?', type: 'question', input: 'range', inputAttributes: { min: viii, max: 120, stride: one }, inputValue: 25 }) |
Collaborators
Donations
Has SweetAlert2 helped y'all create an amazing application?
You can show your support by making a donation in one of two means:
Contribute
Feel free to fork SweetAlert2 on GitHub if y'all accept whatever features that you want to add!
Source: https://kepriprov.go.id/assets/plugins/sweetalert/
0 Response to "Oops Try Again Make Sure You Modify Your Button s Onclick by Adding a Second Name"
ارسال یک نظر