Custom Alert doesn't work in JQuery UI

[pintee]

Hi,

As the title states, I am encountering a weird bug in javascript. In my php I am echoing out javascript that renders a jquery popup alert box to the screen.

echo '<link rel="stylesheet"   
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
                <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
                <link rel="stylesheet" href="/resources/demos/style.css" />
                <script src="../functions.js"></script>
                <script type="text/javascript"> $(document).ready(function() { JQueryAlert("POO!", 120); }); </script>';

functions.js

 function JQueryAlert(message,windowHeight){
    if (!windowHeight) var windowHeight = 470;

    $("#msgdialog").remove();

    $("body").append("<div id=\'msgdialog\'></div>"); 

    thatmsg = $("#msgdialog");

    $("#msgdialog").dialog({
        resizable: false,
        draggable: false,
        width: 770,
        height: windowHeight,
        context: thatmsg,
        modal: true,
        autoOpen: false,
        buttons: {
            "Cancel" : function (){
                thatmsg.dialog("close");
            },
            "OK" : function (){
                loadPage("combat.php");
            }
        }
    });     

    $("#msgdialog").html(message);
    $("#msgdialog").dialog(\'open\');
}

However, it only displays the pop up alert box sometimes. The rest of the time the screen just flashes and doesn't display the pop up box. Any ideas why it is behaving this way?? Thanks for your time.