javascript - Including a different image in SweetAlert2 popup message based on selection of a div after clicking a button

I think something similar to this question was answered in the past. However, I read a number of StackOverflow posts and still couldn't solve the issue. Probably, that is because I don't have a good understanding of jQuery yet and can't apply basic concepts to what I need to solve. So, I would greatly appreciate if you could help me solve this issue. Thanks!

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.

What I want to do : show a different image(.png) in the popup message when clicking a circle with the text "okay".

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".

$(document).ready(function() {
  $('#test').click(function(){
  $(".options:hidden").fadeIn()
    .on("click", function(){
      $(this).css("background", "#F3C78D");
    })
    .on("click", function(){
      swal({
        title: 'Sweet!',
        text: 'Modal with a custom image.',
        imageUrl: '',
        imageWidth: 400,
        imageHeight: 200,
        imageAlt: 'Custom image',
        animation: false
      })
      //  swal({
      //   title: 'Sweet!',
      //   text: 'Modal with a custom image.',
      //   imageUrl: '.png',
      //   imageWidth: 400,
      //   imageHeight: 200,
      //   imageAlt: 'Custom image',
      //   animation: false
      // })
     });
  });
});

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=".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=":300" rel="stylesheet"> -->
    <link href="+Story" rel="stylesheet">

    <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=".3.1/jquery.min.js"></script>
    <script src=".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="/[email protected]/dist/sweetalert2.all.min.js"></script>
    <!-- CSS -->
    <link rel='stylesheet' href='/[email protected]/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 think something similar to this question was answered in the past. However, I read a number of StackOverflow posts and still couldn't solve the issue. Probably, that is because I don't have a good understanding of jQuery yet and can't apply basic concepts to what I need to solve. So, I would greatly appreciate if you could help me solve this issue. Thanks!

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.

What I want to do : show a different image(https://s25.postimg/kw0l49gz3/original.png) in the popup message when clicking a circle with the text "okay".

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".

$(document).ready(function() {
  $('#test').click(function(){
  $(".options:hidden").fadeIn()
    .on("click", function(){
      $(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
      })
      //  swal({
      //   title: 'Sweet!',
      //   text: 'Modal with a custom image.',
      //   imageUrl: 'https://s25.postimg/kw0l49gz3/original.png',
      //   imageWidth: 400,
      //   imageHeight: 200,
      //   imageAlt: 'Custom image',
      //   animation: false
      // })
     });
  });
});

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./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./css?family=Sunflower:300" rel="stylesheet"> -->
    <link href="https://fonts.googleapis./css?family=Poor+Story" rel="stylesheet">

    <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn./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/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
    <!-- CSS -->
    <link rel='stylesheet' href='https://cdn.jsdelivr/npm/[email protected]/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>

Share Improve this question asked Aug 5, 2018 at 12:09 Lim 77916 silver badges31 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

You can use data-attribute to define the image link inside the element and then you can easily use it within the JS code. You can also do the same with the other parameter.

$(document).ready(function() {
  $('#test').click(function(){
  $(".options:hidden").fadeIn()
    .on("click", function(){
      $(this).css("background", "#F3C78D");
    })
    .on("click", function(){
      var url=$(this).attr('data-img');
      swal({
        title: 'Sweet!',
        text: 'Modal with a custom image.',
        imageUrl: url,
        imageWidth: 400,
        imageHeight: 200,
        imageAlt: 'Custom image',
        animation: false
      })

     });
  });
});

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./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./css?family=Sunflower:300" rel="stylesheet"> -->
    <link href="https://fonts.googleapis./css?family=Poor+Story" rel="stylesheet">

    <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn./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/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
    <!-- CSS -->
    <link rel='stylesheet' href='https://cdn.jsdelivr/npm/[email protected]/dist/sweetalert2.min.css'>
</head>
<body>
  <div class="container">
    <button type="button" class="btn btn-outline-success" id="test">test</button>
    <div class="options" data-img="https://unsplash.it/400/200" id="option1"><span>Hello<br>World</span></div>
    <div class="options" data-img="https://unsplash.it/400/200" id="option2"><span>Goodbye</span></div>
    <div class="options" data-img="https://unsplash.it/400/200" id="option3"><span>How<br>are<br>you?</span></div>
    <div class="options" data-img="https://unsplash.it/400/200" id="option4"><span>Fine</span></div>
    <div class="options" data-img="https://s25.postimg/kw0l49gz3/original.png" id="option5"><span>Okay</span></div>
  </div>
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Including a different image in SweetAlert2 popup message based on selection of a div after clicking a button - Stac

1 Answer 1

与本文相关的文章

评论列表(0)