JSFiddle - React, Tailwind, and code Playground

by shatul patil

HTML

<a href="javascript:void(0);" data-href="https://media.giphy.com/media/k2xbaNGSnQkzC/giphy.gif" data-toggle="modal" data-target="#myModal">gif1</a> | 

<a href="javascript:void(0);" data-href="https://media.giphy.com/media/1iu8uG2cjYFZS6wTxv/giphy.gif" data-toggle="modal" data-target="#myModal">gif2</a>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img class="showimage img-responsive" src="" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    $('a').on('click', function () {
        var image = $(this).attr('data-href');
        /* alert(image) */;
        $('#myModal').on('show.bs.modal', function () {
            $(".showimage").attr("src", image);
        });
    });
});