Dynamic BS Modal

by Rajesh Sitaraman

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="view-link" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                 <h4 class="modal-title"><span localeval="AddLinkLabel">View Links</span></h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <!-- entries goes here-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span localeval="CloseBtn">Cancel</span></button>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

var jsonString = '[{"control":"Global Navigation","ctid":"1"},{"control":"Featured Items","ctid":"2"},{"control":"Performance Charts","ctid":"3"},{"control":"Featured Links","ctid":"4"},{"control":"Footer Navigation","ctid":"5"},{"control":"Footer Logo Links","ctid":"6"},{"control":"Article Related Items","ctid":"7"}]';

var jsonLinks = JSON.parse(jsonString);

var viewLinksDlg = viewLinksDlg || (function () {
    return {
        show: function () {
            $('#view-link').modal();
            $('#view-link').on("shown.bs.modal", function () {
                $.each(jsonLinks, function () {
                    $( '.form-group' ).append( '<h4>'+this.control+'</h4>' );
                    $( '.form-group' ).append( '<div class="well">'+ 'https://' + window.location.host + '/lm?ctid=' + this.ctid +'&id=</div>' );
                });
            });

        },
        hide: function () {
            $('#view-link').modal('hide');
        }
    };
})();

viewLinksDlg.show();