Glassbox.js javascript plugin doesn't work in JQuery

So I have the following code, and glassLoad() does NOT work when called from a JQuery context. I have isolated the problem to one specific line, myBox.apos('170px', '150px'); which seems to stop the entire function from running, but ONLY when called from JQuery. If I use a standard onclick="glassLoad();" it runs the function perfectly, but if i include the function in JQuery it stops the WHOLE JQuery function from running:

    @model IEnumerable<OneEightyWebApp.Models.PropertyDB>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../Content/javascripts/glassbox/glassbox.js" type="text/javascript"></script>

<head>


    <title></title>


    <script type="text/javascript">

        function populate() {
            var select = document.getElementById("centres");
            for (var i = 1; i <= 10; i++) {
                var option = document.createElement("option");
                option.value = i;
                option.text = i;
                select.appendChild(option);
            }
        }

        function divGenerator() {
            var div;
            for (var i = 1; i <= document.getElementById("revisions").value; i++) {

                div = document.createElement("div");
                div.className = "class1";
                div.innerHTML = "Space " + i;
                div.style.width = "100px";
                div.style.height = "100px";
                div.style.float = "left";
                document.getElementById("container2").appendChild(div);
            }
        }

        function glassLoad() {

            path_to_root_dir = "../../Content/";
            var myBox = new GlassBox();
            myBox.init('myBox', '128px', '62px', 'hidden');
            myBox.apos('170px', '150px');
        }



    </script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("body").on("click", ".class1", function () {
                glassLoad();
                alert("div clicked");
            });
        });

    </script>

</head>

<body>
    <!--
<a href="javascript:myFunc();">popup</a>
-->
    <div id="container1" style="width: auto; height: 50px;">

        <button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
        @Html.DropDownList("revisions", (List<SelectListItem>)ViewData["revisions"])
    </div>
    <div id="container2" style="margin: 10px; float: left;"></div>

    <div id="myBox">Hello!</div>
</body>

Solution

To make this run with PrototypeJS

<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"> </script>
<script type="text/javascript">
    document.observe('dom:loaded',function(){
        $$("body")[0].on('click', ".class1", function () {
            glassLoad();
            alert("div clicked");
        });
    });
</script>

This will trigger when the DOM is loaded and uses the CSS selector method $$() and selects the first element in the list that is returned and then attaches to the click event of that element.

The rest of your javascript doesn't look like it depends on jQuery or Prototype so you should be able to swap this code snippet into your code.