By default the colour is white.
Is it possible to change modal background color of sweetalert2?
I have tried it to change with CSS, as I follow on the other question here and here, like this :
.sweet-alert
{
background-color: #2f2f2f96;
}
but I got nothing,
i use the sweetalert question feature
Swal.mixin({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([
{
title: 'Question 1',
text: 'Chaining swal2 modals is easy'
},
'Question 2',
'Question 3'
]).then((result) => {
if (result.value) {
Swal.fire({
title: 'All done!',
html:
'Your answers: <pre><code>' +
JSON.stringify(result.value) +
'</code></pre>',
confirmButtonText: 'Lovely!'
})
}
})
I wish i can change the modal colour to grey
You have to add background in Swal function. It will Works for you.
Swal.mixin({
input: "text",
confirmButtonText: "Next →",
showCancelButton: true,
background: 'gray',
progressSteps: ["1", "2", "3"]
})
.queue([
{
title: "Question 1",
text: "Chaining swal2 modals is easy"
},
"Question 2",
"Question 3"
])
.then(result => {
if (result.value) {
Swal.fire({
title: "All done!",
background: 'gray',
html:
"Your answers: <pre><code>" +
JSON.stringify(result.value) +
"</code></pre>",
confirmButtonText: "Lovely!"
});
}
});
Related
I want to change the 'title' color in SweetAlert2. How can I do that?
Thank you in advance
function CustomConfirm(title, message, type) {
return new Promise((resolve) => {
Swal.fire({
title: title,
text: message,
icon: type,
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#6e7d88',
confirmButtonText: 'Yes',
cancelButtonText: "No"
}).then((result) => {
if (result.isConfirmed) {
resolve(true);
} else {
resolve(false);
}
});
});
}
Here is my final function:
Swal.fire({
title: "<h5 style='color:red'>" + title + "</h5>",
text: message,
icon: type,
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#6e7d88',
confirmButtonText: 'Yes',
cancelButtonText: "No"
})
You can use customClass or showClass to get the CSS class for the popup and change the colors in a CSS file from there.
For example:
function CustomConfirm(title, message, type) {
return new Promise((resolve) => {
Swal.fire({
customClass : {
title: 'swal2-title'
}
title: title,
text: message,
...
Then in your CSS
.swal2-title {
color: red;
}
You can try add this code in a global CSS:
Swal.fire({
title: 'Testing Custom Styles',
html: 'Good Job',
icon: 'success'
})
.swal2-container.swal2-center>.swal2-popup{
background-color: #121212 !important;
}
.swal2-html-container, .swal2-title{
color: white !important;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11.4.8/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You need set the HTML param to TRUE and use your own style or class.
Swal.fire({
title: "HTML <h1 style='color:red'>Title</h1>",
html: true
})
I need your help because I can not retrieve the value and do a test and then prefill the following field.
Basically if we select in the morning, the proposed time will be 7am otherwise we can still modify this time.
Thanks for your help
progressSteps: ['1', '2', '3']
})
var test = 0;
var steps = [
{
title: ' Choose user?',
input: 'select',
type: 'question',
inputOptions: listeUser,
confirmButtonText: 'Next →',
showCancelButton: true,
},
{
title: ' Morning, AM or Night ?',
input: 'select',
type: 'question',
inputOptions: typequart,
confirmButtonText: 'Next →',
showCancelButton: true,
**inputValidator: (value) => {if(value === "'Morning'"){test = 1;}**
},
{
title: 'Hour',
input: 'text',
inputPlaceholder : 'HH-MM-SS',
**inputValue: if(test=1){input here this value (07-00-00)}**
type: 'info',
confirmButtonText: 'Next →',
showCancelButton: true,
}];
I am trying to add input fields in chaining modals (queue) using sweet alerts.
Reference http://www.inetcnx.net/sweetalert/index.html#chaining-modals
Problem: I want to add validation on each input field. Lets say; to make it required field, therefore user must need to enter value in input before proceeding to next step.
Code:
$('body').on('click','.apt_action',function() {
swal.setDefaults({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
animation: true,
progressSteps: ['1', '2', '3']
})
var steps = [
{
title: 'Customer Name',
inputId: "customer_name",
inputPlaceholder: "Write something"
},
{
title: 'Sales Person',
text: 'Product sold by?'
},
{
title: 'Additional Details',
text: 'Coments or additional notes'
},
]
swal.queue(steps).then(function (result) {
swal.resetDefaults()
swal({
title: 'All done!',
html:
'Your answers: <pre>' +
(result) +
'</pre>',
confirmButtonText: 'Lovely!',
showCancelButton: false
})
}, function () {
swal.resetDefaults()
})
});
Js Fiddle :https://jsfiddle.net/mvohq23z/3/
Just add a preConfirm function block at each step you want to validate and do the validation using the variable value as you wish. Call the resolve() method for success or the reject('text error description here') to display an error message and prevent the chain modal to proceed to the next step.
Here's an example using your code in order to make all the input fields required:
JSfiddle here: https://jsfiddle.net/davidtoledo/ymb38u6t/1
swal.setDefaults({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
animation: true,
progressSteps: ['1', '2', '3']
});
var steps = [
{
title: 'Customer Name',
inputId: "customer_name",
inputPlaceholder: "Write something",
preConfirm: function(value)
{
return new Promise(function(resolve, reject)
{
if (value) {
resolve();
} else {
reject('Please type something in the step 1!');
}
});
}
},
{
title: 'Sales Person',
text: 'Product sold by?',
preConfirm: function(value)
{
return new Promise(function(resolve, reject)
{
if (value) {
resolve();
} else {
reject('Please type something in the step 2!');
}
});
}
},
{
title: 'Additional Details',
text: 'Coments or additional notes',
preConfirm: function(value)
{
return new Promise(function(resolve, reject)
{
if (value) {
resolve();
} else {
reject('Please type something in the step 3!');
}
});
}
},
];
swal.queue(steps).then(function (result) {
swal.resetDefaults();
swal({
title: 'All done!',
html:
'Your answers: <pre>' +
(result) +
'</pre>',
confirmButtonText: 'Lovely!',
showCancelButton: false
})
}, function () {
swal.resetDefaults()
});
Cheers,
David Costa
Is it possible to add custom buttons to the Ext.MessageBox.confirm. By custom I mean custom text and custom number of buttons...
Ext.MessageBox.confirm('Delete', 'Are you sure ?',
function(btn){
if(btn === 'yes'){
return true;
}
else{
return false;
}
});
Try setting the buttonText, like:
Ext.MessageBox.show({
title: 'Delete',
message: 'Are you sure ?',
width: 300,
buttons: Ext.Msg.YESNO,
buttonText: {
yes: 'Yesssss!!!',
no: 'Nooo!!!'
}
});
Example: https://fiddle.sencha.com/#fiddle/12bq
Try using below
Ext.Msg.show({
title: 'Enter Message',
msg: null,
buttons: [{
itemId: 'ok',
text: 'Send',
ui: 'action'
}, {
itemId: 'cancel',
text: 'Cancel'
}],
prompt: {
maxlength: 180,
autocapitalize: false
},
fn: function(text,btn) {
// do some stuff
}
});
I would like to implement a form inside of the sweet alert. I can put just one input inside, with title and body.
There is a way to customize the alert, docs says it, but is not allowed to load class css3 from my framework (customizecss.com) or from my style.css.
I'm trying to include a input inside of the alert, this way:
swal({
title: "HTML <small>Title</small>!",
text: "<input type='text'><label class='my-label'>Name</label>",
html: true
});
And it doesn't work, only show the label... why?
I wonder if there is some way to do it...
Thanks!
Sweet Alert -> https://github.com/t4t5/sweetalert
You can use this plugin in order to achive what you want:
https://github.com/taromero/swal-forms
It creates forms inside the modal in a syntax-fiendly manner:
swal.withForm({
title: 'More complex Swal-Forms example',
text: 'This has different types of inputs',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Get form data!',
closeOnConfirm: true,
formFields: [
{ id: 'name', placeholder: 'Name Field' },
{ id: 'nickname', placeholder: 'Add a cool nickname' },
{ id: 'password', type: 'password' },
{ name: 'sex', value: 'Male', type: 'radio' },
{ name: 'sex', value: 'Female', type: 'radio' },
{ name: 'skills', value: 'JS', type: 'checkbox' },
{ name: 'skills', value: 'Ruby', type: 'checkbox' },
{ name: 'skills', value: 'Java', type: 'checkbox' },
{ id: 'select',
type: 'select',
options: [
{value: 'test1', text: 'test1'},
{value: 'test2', text: 'test2'},
{value: 'test3', text: 'test3'},
{value: 'test4', text: 'test4'},
{value: 'test5', text: 'test5'}
]}
]
}, function (isConfirm) {
// do whatever you want with the form data
console.log(this.swalForm) // { name: 'user name', nickname: 'what the user sends' }
})
I know this is old, but I'll answer the question for all the web searchers out there:
You need to give an array as an argument, using an html property:
swal({
html: "<form action='verify.php' method='post'>
<input id='user' type='email'>
<input id='pass' type='password'>
<input id='idno' type='number'>
<submit>
</form>"});
Replace verify.php with whatever page you need the data in, and replace the string after html: with whatever HTML code you need.
The only downside is that people need to hit the submit-button on the form, and not SweetAlert's own button, although there might be a way to remove SweetAlert's own button too.
It looks like you can use a Sweet Alert with a type of 'input' (as opposed to 'error' or 'warning').
$window.swal({title: 'Text Entry', text: 'Put some text here, please.', type: 'input'});
From the Github README:
A prompt modal where the user's input is logged:
sweetAlert({
title: "An input!",
text: 'Write something interesting:',
type: 'input',
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top"
}, function(inputValue){
console.log("You wrote", inputValue);
});