JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body" id="dc">
                <ul>
                    <li><a href="http://dev1.dev.cobai.io/rest/collections">Some link</a>

                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

CSS

#dynamic {
    border: solid 1px;
    border-radius: 8px;
    width: 80%;
    min-height: 80%;
    max-height: 80%;
    color: red;
    padding-top: 1em;
    margin: 0 auto;
}

JavaScript

$('.modal').modal();

$('.modal').on("click", "a", function (e) {
    var target = $(this).attr('href');
    $('.modal-body').html('');
    $('<iframe id="dynamic">').attr('src', target).appendTo($('.modal-body'));
    e.preventDefault();
});