testmodal.html

<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="assets/css/bootstrap.css" />
    <link rel="stylesheet" href="assets/css/bootstrap-responsive.css" />
    <script src="assets/js/bootstrap.js" ></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script>
        function registerItem(id, name, picurl, descDiv, statTitles, statDetails, recType, recItems)
        {
            var items = document.getElementById('itemhold').innerHTML;
            var pops = document.getElementById('pophold').innerHTML;
            document.getElementById('itemhold').innerHTML = items + '<h4 onClick="$(\''+ id +'\').modal(\'toggle\')"><img src="'+ picurl +'" height="30">'+ name +'</h4>';
            document.getElementById('pophold').innerHTML = pops + '<div id="'+ id +'" class="modal hide fade"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h3><img src="' + picurl +' height="30"> ' + name + '</h3></div><div class="modal-body">'+ document.getElementById(descDiv).innerHTML +'</div></div>';
        }
        function items()
        {
            registerItem('expop', 'Example 1', 'http://placehold.it/30x30', 'itemdesc', 'hi', 'hi', 'crafting', 'hi');
            registerItem('expopx', 'Example 2', 'http://placehold.it/30x30', 'itemdesc', 'hi', 'hi', 'crafting', 'hi');
        }
    </script>
</head>
<body onLoad="items()">

    <div id="itemdesc" class="hide">
        This item is an item. <h1>Title</h1> Hi!
    </div>
    <div id="itemhold"></div>
    <div id="pophold"></div>

    <!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
</div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>


</body>
</html>