Changing image class inside bootstrap modal

user_16737129 0
Viewed 34

I am trying to build a user profile image select tool that lives in a bootstrap modal. The idea is that when the user clicks an image the image will be highlighted somehow (a border) and a "save changes" button will become active.

<style>
 .selected {
       border: 2px blue;
      }
</style>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img src"path/to/image" class="imgClass" id="img.png">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
    $(".imgClass").click(function(){
                     $(this).addClass("selected");
                  });
</script>

This is a rough outline of my work. Essentially nothing happens and I have no idea why. Can anyone offer some advice?

bootstrap-modal jquery
1 Answers

Actually there are two errors in your code.

CSS should have the statement solid

border: 2px solid blue;

The img src tag is missing an equal sign:

<img src="/assets/img/someimage.jpg" class="imgClass" id="img.png">
Admin1
Related