I am having issues with two different jQuery scripts running on the page at the same time. I have a carousel at the top of the page. I also have this Modal window, which works great, until I put it on my website. I have customized the modal window, and here’s a picture of what happens when I run it on my site.


Here is what's currently in the head of my page.


<meta name="keywords" content="ar toolbox, toolbox, jared newnam, start date calendar, online application, tracker, staff common, compliance, open ended questions, graduation calculator, grad calculator, gpa calculator, crabwa"/>
<meta name="description" content="Complete SignNow walkthrough for the iPad. " />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AR's Toolbox - Home</title>
<meta name="keywords" content="ar toolbox, walkthrough, financial aid, signnow, pin, online appllication center, oac, efc calculator, grad calculator, gpa calculator," />
<meta name="description" content="Numerous tools used for making the day of an AR much better and more efficient." />
<link href="css/south_style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1-4-2.min.js"></script>
<!--<script type="text/javascript" src="/jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>-->
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 
<script type="text/javascript" src="js/showhide.js"></script> 
<script type="text/JavaScript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/efccalc.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>

<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />

Here's the JQUERY scripting I'm using...

<!--Modal Code-->
<script type="text/javascript">


    //get the height and width of the page
    var window_width = $(window).width();
    var window_height = $(window).height();

    //vertical and horizontal centering of modal window(s)
    /*we will use each function so if we have more then 1
    modal window we center them all*/

        //get the height and width of the modal
        var modal_height = $(this).outerHeight();
        var modal_width = $(this).outerWidth();

        //calculate top and left offset needed for centering
        var top = (window_height-modal_height)/2;
        var left = (window_width-modal_width)/2;

        //apply new top and left css values
        $(this).css({'top' : top , 'left' : left});



              //get the id of the modal window stored in the name of the activating element
              var modal_id = $(this).attr('name');

              //use the function to show it



            //use the function to close it




    function close_modal(){

        //hide the mask

        //hide modal window(s)

    function show_modal(modal_id){

        //set display to block and opacity to 0 so we can use fadeTo
        $('#mask').css({ 'display' : 'block', opacity : 0});

        //fade in the mask to opacity 0.8

         //show the modal window

Also, the above picture shows how everything looks in Chrome. Here's a picture of how the overlay looks when used in IE8. Any ideas on fixing this, too...


Additionally, here's the code I'm using in the <body></body> tags (if it helps)...

<!--Code for Modal overlay-->
    <div id='mask' class='close_modal'></div>

    <div id='first_window' class='modal_window' align="center"><h3>Please select the toolbox you would like to enter...</h3><br /><img src="images/toolbox.png" width="96" height="69" alt=""/><br>
    <a href="http://lipsum.com" target="_self" </a><img src="images/View-the-toolbox-for-Admissions.png" width="500" height="96" alt="" /><br /><br> 
    <a href="http://lipsum.com" target="_self" </a><img src="images/View-the-toolbox-for-Academics.png" width="500" height="96" alt="" /><br /><br>
    <a href="http://lipsum.com" target="_self" </a><img src="images/View-the-toolbox-for-Finance.png" width="500" height="96" alt="" /><br />
<!--End Code for Modal overlay-->
And here is the CSS used (again... if it helps)...

/* leanModal */

 position:fixed; /* important */
    top:0px; /* start from top */
    left:0px; /* start from left */
    height:100%; /* cover the whole page */
    width:100%;  /* cover the whole page */
    display:none; /* don't show it '*/
    /* styling bellow */
    background-color: #fb991a; 
 position:absolute; /* important so we can position it on center later */
    display:none; /* don't show it */
    /* styling bellow */
/* style a specific modal window  */
    background: #fb991a;
I've done everything I can think of up to this point. Really need some guidance here.

Thanks, in advance, for your assistance.