Question

I want to create the exact same concept of a modal image from this page: https://www.w3schools.com/howto/howto_css_modal_images.asp but it keeps messing up my margins since I have multiple images I want enlarged when clicked on separately... not just one like the website has. Any help would be appreciated!

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 25px 50px;
  text-align: center;
}

<i>
    <img src="https://static.wixstatic.com/media/d1f9ba_5aac77db6640457e8c404d28965d4df4.jpg/v1/fill/w_649,h_519,al_c,q_90,usm_0.66_1.00_0.01/d1f9ba_5aac77db6640457e8c404d28965d4df4.webp" width=250 height=200 />
    <img src="https://static.wixstatic.com/media/d1f9ba_051d1fad7e4a473d8e755a3d07f7fbf1.jpg/v1/fill/w_645,h_519,al_c,q_90,usm_0.66_1.00_0.01/d1f9ba_051d1fad7e4a473d8e755a3d07f7fbf1.webp" width=250 height=200 />
    <img src="https://static.wixstatic.com/media/d1f9ba_d9199ff122d94981b8a05b9517b8989f.jpg/v1/fill/w_650,h_519,al_c,q_90,usm_0.66_1.00_0.01/d1f9ba_d9199ff122d94981b8a05b9517b8989f.webp" width=250 height=200 />
</i>

Answer 1

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="popup-thumbnail img-responsive">
                    <img src="https://images.unsplash.com/photo-1494719019271-7bfff81660d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74496a215491b1529d6702f146901970&auto=format&fit=crop&w=500&q=60">
                </div>
            </div>
        </div>
    </div>
    <div id="modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>


<script>$('.popup-thumbnail').click(function(){
    $('.modal-body').empty();
    $($(this).parents('div').html()).appendTo('.modal-body');
    $('#modal').modal({show:true});
});

$('#modal').on('show.bs.modal', function () {
   $('.row .popup-thumbnail').addClass('blur');
})

$('#modal').on('hide.bs.modal', function () {
   $('.row .popup-thumbnail').removeClass('blur');
})</script>
</body>
</html>

This code without styling (CSS). I think you are using Bootstrap, because I see "row" the class on your code. And I coded compatible with Bootstrap for you. So if you add Bootstrap and FontAwesome, It will be work.

How to make a pop-up modal image show up for multiple images on the same page?

1 个答案: