JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<link rel="stylesheet" href="//getbootstrap.com/dist/css/bootstrap.min.css">
<script src="//getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="container">
<ul class="verdicts-list-boxes row">
    <li class="col-xs-3">
        <div class="verdict-small">
            <p class="title">
                $26.1 <span>Million</span>
            </p>
            <p class="subtitle">
                Verdict in Age Discrimination Case
            </p>
            <p>
                <a href="#" data-toggle="custom-modal" data-target="#verdict-1">View Details</a>
            </p>
        </div>
        
        <div class="verdict-full sr-only">
            <p>
                Client Bobby Dean Nickel, a 66 year old man at the time of termination, obtained a verdict against his former employer Staples Contract &amp; Commercial and Staples, Inc. for age discrimination. Nickel, a nine year employee of Defendant, was fired for stealing a 68cent bell pepper after he expressed to management his plans on continuing to work for Staples, Inc until “he was physically able to.”
            </p>
            
            <p>
                The jury ruled in favor of Plaintiff and awarded him 26.1 million dollars in total damages – the largest employment related award of its kind in the Los Angeles legal history.
            </p>
        </div>
    </li>
    
    <li class="col-xs-3">
        <div class="verdict-small">
            <p>
                $26.1 <span>Million</span>
            </p>
            <p>
                Verdict in Age Discrimination Case
            </p>
            <p>
                <a href="#">View Details</a>
            </p>
        </div>
        
        <div class="verdict-full">
            <p>
                Client Bobby Dean Nickel, a 66 year old man at the time of termination, obtained a verdict against his former employer Staples Contract &amp; Commercial and Staples, Inc. for age discrimination. Nickel, a nine year employee of...

CSS

ul { list-style: none; margin: inherit; padding: inherit; }

JavaScript

$(function() {
    $('a[data-toggle="custom-modal"]').on('click', function() {       
        var verdictTitle = $(this).closest('li').find('.title').html();
        var verdictContent = $(this).closest('li').find('.verdict-full').html();
        
        var customModal = $('<div class="custom-modal modal hide fade" tabindex="-1" role="dialog">' +
                        '<div class="modal-dialog" role="document">' +
                        '<div class="modal-content">' +
                        '<div class="modal-header">' +
                        '<h4 class="modal-title custom-modal-title">' + verdictTitle + '</h4>' +
                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                        '<span aria-hidden="true">&times;</span></button>' +
                        '</div>' +
                        '<div class="modal-body custom-modal-body">' + verdictContent + '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    );
        
        $('body').append(customModal);
        
        $('.custom-modal').removeClass('hide').modal('show');
        
        $('.custom-modal').on('hidden.bs.modal', function() {
            $('.custom-modal').modal('hide').remove();
        });
    });
});