Right now, what happens is the following:
1. When clicking a button in the middle, five circles show up.
2. When you click a circle, a popup message made with SweetAlert2 shows up.
3. When clicking the "ok" button in the popup message, the message is closed and you can see that the circle's background was changed to light orange.
In this post, Temani Afif let me know how to execute different SweetAlert function.
His solution was using if($(this).attr('id')!="option5") and else within .on("click", function(){}. (jsFiddle for his solution can be found here).
His solution worked for choosing among functions that did not require async.
By the way, I got curious about executing "function" or "async function" based on selection of a div after clicking a button and he advised me to ask another question. I asked him about this, and he advised me to add a question. So, I am posting this!
What I want to do : show a popup message that require user-input only when clicking a circle with the text "okay".
The challenge : The current SweetAlert2 message starts with click: function(){and the popup message I would like to include starts with click: async function(){.
Note: I assigned "options" class for all circles and different id for each circle. The id for a circle with the text "okay" is "option5".
I'd greatly appreciate any advice. Thanks in advance!
$(document).ready(function() {
$("#fallingStars").delay(300).animate({'opacity':'1'},500);
$("#title").delay(500).animate({'opacity':'1'},800);
$("#slogan").delay(800).animate({'opacity':'1'},800);
// https://codepen.io/hlim18/pen/EpbLmN
$('#test').click(function(){
// $(".options").fadeToggle();
$(".options:hidden").fadeIn()
.on("click", function(){
// hex color #_ _ _ _ _ _
$(this).css("background", "#F3C78D");
})
.on({
click: function(){
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
// click: async function(){
// // // "text" enter message START
// const {value: text} = await swal({
// title: 'Why do you feel unsafe here?',
// input: 'text',
// inputPlaceholder: 'Type your message :)',
// customClass: 'swal2-textbox-msg',
// showCancelButton: true,
// confirmButtonColor: '#F3C78D',
// confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Yes!</div>',
// cancelButtonColor: '#9FEDDA',
// cancelButtonText: '<div id="swal2-cancelBtnTxt" style="color:#000000">Cancel</div>',
// // backdrop color : light gray
// backdrop: `
// rgba(211,211,211,0.4)
// center left
// no-repeat
// `,
// inputValidator: (value) => {
// return !value && 'You need to write something!'
// }
// });
// if (text) {
// swal({
// text: `Your entered : "${text}"`,
// // backdrop color : light gray
// backdrop: `
// rgba(211,211,211,0.4)
// center left
// no-repeat
// `,
// confirmButtonColor: '#F3C78D',
// confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Okay</div>'
// })
// }
}
});
});
})body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" id="option1"><span>Hello<br>World</span></div>
<div class="options" id="option2"><span>Goodbye</span></div>
<div class="options" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" id="option4"><span>Fine</span></div>
<div class="options" id="option5"><span>Okay</span></div>
</div>
</body>
</html>I found a solution! I assigned "withoutInput" class for options 1~4 and "withInput" class for option 5.
class apple and class orange together, you can write as class="apple orange".$(document).ready(function() {
// https://codepen.io/hlim18/pen/EpbLmN
$('#test').click(function(){
// $(".options").fadeToggle();
$(".withoutInput:hidden").fadeIn()
.on("click", function(){
// hex color #_ _ _ _ _ _
$(this).css("background", "#F3C78D");
})
.on({
// // include this for "thank-you" & "cancel" message codes
click: function(){
// // "Thank-you" message START
swal({
title: 'Thank you!',
text: 'Your input has been recorded.',
// type: 'warning',
imageUrl: 'https://unsplash.it/400/200',
imageAlt: 'Unsplash',
// imageClass: 'swal2-thx-img',
animation: false,
customClass: 'swal2-thx-msg',
// backdrop color : light gray
backdrop: `
rgba(211,211,211,0.4)
center left
no-repeat
`,
confirmButtonColor: '#9FEDDA',
confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div>'
})
}
// // "click: function" END
// // "Thank-you" message END
});
// "withoutInput" END
$(".withInput:hidden").fadeIn()
.on("click", function(){
// hex color #_ _ _ _ _ _
$(this).css("background", "#F3C78D");
})
.on({
// include this for "text-input" & "login & password" message codes
click: async function(){
// // // "text" enter message START
const {value: text} = await swal({
title: 'Why do you feel unsafe here?',
input: 'text',
inputPlaceholder: 'Type your message :)',
customClass: 'swal2-textbox-msg',
showCancelButton: true,
confirmButtonColor: '#F3C78D',
confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Yes!</div>',
cancelButtonColor: '#9FEDDA',
cancelButtonText: '<div id="swal2-cancelBtnTxt" style="color:#000000">Cancel</div>',
// backdrop color : light gray
backdrop: `
rgba(211,211,211,0.4)
center left
no-repeat
`,
inputValidator: (value) => {
return !value && 'You need to write something!'
}
});
if (text) {
swal({
text: `Your entered : "${text}"`,
// backdrop color : light gray
backdrop: `
rgba(211,211,211,0.4)
center left
no-repeat
`,
confirmButtonColor: '#F3C78D',
confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Okay</div>'
})
}
// // "text" enter message END
}
// // async msg END
});
// // "withInput" END
});
})body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options withoutInput" id="option1"><span>Hello<br>World</span></div>
<div class="options withoutInput" id="option2"><span>Goodbye</span></div>
<div class="options withoutInput" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options withoutInput" id="option4"><span>Fine</span></div>
<div class="options withInput" id="option5"><span>Okay</span></div>
</div>
</body>
</html>