Varvara Jones Varvara Jones - 2 months ago 11
Javascript Question

Pass data to a jQuery modal

Using a simple modal built from scratch. Nothing fancy added yet. But I need to pass the data from the array and the only thing I get onclick so far is the last member of the array added to all clickable elements. Please advise on what to do to make sure that appropriate data is passed on click.

<div id="skills-mobile">
<!-- popup content -->
<div id="myModal" class="modal">
<img class="close-icon" src="img/close-icon.png" alt="cross or close the window icon">
<article class="modal-content">

</article>
</div>
</div>


And this is the array of objects being used:

var skills = [
{
"id":"html-5",
"skill":"HTML5",
},
{
"id":"css-3",
"skill":"CSS3"
},
{
"id":"jvscrpt",
"skill":"Javascript"
},
{
"id":"inter-map",
"skill":"Interaction Mapping"
},
{
"id":"wire",
"skill":"Wireframing"
},
{
"id":"docum",
"skill":"Documentation"
},
{
"id":"adobecc",
"skill":"Adobe CC"
}
]


And this is jQuery. Right now it also outputs values over and over again when I close the modal and open it again. So it'll basically append it over and over and I need to fix it, I know. If possible, please provide guidance of where I am doing it wrong. I think the structure isn't right.

var skillSlideshow = function() {

for(var i = 0; i <= skills.length; i++) {

$('#skills-mobile').append('<img id="' + skills[i].id + '" class="skill-img" data-toggle="modal" data-id="107" src="' + skills[i].iconurl + '" />');

//MODALS
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var imgbtn = document.getElementById(skills[i].id);

// Get the <span> element that closes the modal
var closebtn = document.getElementsByClassName("close-icon")[0];

// When the user clicks the button, open the modal
imgbtn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
closebtn.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
};
skillSlideshow();

Answer

This should make it work...

var skills = [
        {
            "id":"html-5",
            "skill":"HTML5",
        },
        {
            "id":"css-3",
            "skill":"CSS3"
        },
        {
            "id":"jvscrpt",
            "skill":"Javascript"
        },
        {
            "id":"inter-map",
            "skill":"Interaction Mapping"
        },
        {
            "id":"wire",
            "skill":"Wireframing"
        },
        {
            "id":"docum",
            "skill":"Documentation"
        },
        {
            "id":"adobecc",
            "skill":"Adobe CC"
        }
    ]
    var clearModal = function() {
      $('#myModel').css('display', 'none')
      $(".modal-content").empty();
    }
    var skillSlideshow = function() {

        for(var i = 0; i < skills.length; i++) {
            $('#skills-mobile').append('<img id="' + skills[i].id + '" class="skill-img" data-toggle="modal" data-id="107" data-index="'+ i +'"src="' + skills[i].iconurl + '" />')
        }
      
        $('.skill-img').on('click', function(e) {
          $('#myModel').css('display', 'block');
          var data = skills[parseInt(e.currentTarget.dataset.index)]
          //injecting the data into the modal
          const html = "<div>id:" + data.id + "</div><div>skill:" + data.skill + "</div>"
          $('.modal-content').html(html)
        })
        
        $('.close-icon').on('click', clearModal)
        $('#myModal').on('click', function(e) {
          //assuming you give proper styling to .modal-content and .modal
          if(e.target.id === 'myModal') clearModal()
        })
    };
    skillSlideshow();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="skills-mobile">
     <!-- popup content -->
     <div id="myModal" class="modal">
         <img class="close-icon" src="img/close-icon.png" alt="cross or close the window icon">
         <article class="modal-content">

         </article>
     </div>
 </div>

Comments