Including A Different Image In Sweetalert2 Popup Message Based On Selection Of A Div After Clicking A Button

June 25, 2024 Post a Comment

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

Solution 1:

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;
}

.optionsspan {
    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><htmllang="en"><head><!-- Required meta tags --><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap 4.1.x --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"crossorigin="anonymous"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><linkrel="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"> --><linkhref="https://fonts.googleapis.com/css?family=Poor+Story"rel="stylesheet"><!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"crossorigin="anonymous"></script><scripttype="text/javascript"src="index.js"></script><!-- sweetalert2 --><!-- JS --><scriptsrc="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script><!-- CSS --><linkrel='stylesheet'href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'></head><body><divclass="container"><buttontype="button"class="btn btn-outline-success"id="test">test</button><divclass="options"data-img="https://unsplash.it/400/200"id="option1"><span>Hello<br>World</span></div><divclass="options"data-img="https://unsplash.it/400/200"id="option2"><span>Goodbye</span></div><divclass="options"data-img="https://unsplash.it/400/200"id="option3"><span>How<br>are<br>you?</span></div><divclass="options"data-img="https://unsplash.it/400/200"id="option4"><span>Fine</span></div><divclass="options"data-img="https://s25.postimg.cc/kw0l49gz3/original.png"id="option5"><span>Okay</span></div></div></body></html>

javascript spravka

Including A Different Image In Sweetalert2 Popup Message Based On Selection Of A Div After Clicking A Button

Solution 1:

Post a Comment for "Including A Different Image In Sweetalert2 Popup Message Based On Selection Of A Div After Clicking A Button"