JQuery dialog box not appearing in current screen center

I have a test php file which has 50 buttons in a table (just to make a big table). When the first button is clicked, I want a JQuery dialog box which has a html textbox to open via JQuery. For now, the code opens the textbox, but at the bottom of the screen. That is below the table. My objective is to open at the center of the current screen, ie, without being scrolled down by the user. Here's my code:

 <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
       <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js">
**<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />**
</script>
        <script type="text/javascript" >
         $(document).ready(function(){
                  showClick();
        });

        function showClick(){ $('#comment0').click(function(ez) {
        $('#0').dialog('open');
        ez.preventDefault();
        return false;
    });
    $('#0').dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        title: 'haha',
        height: 'auto',    
        draggable: true,
        position: 'center'
    }); }


    </script>
    </head>
    <body>
    <?php
        ?><div id="0"><input type="text" ></div>
        <?php
        echo "<table>";
        for($i=0; $i<50; $i++) {?>
            <tr>
            <td><input type="button" class="comment0" value="Comment" id="comment0"></td>
            </tr>
            <!--div id="<?php echo $i; ?>" style="display :none"><input type="text" ></div-->       
            <?php
        } ?>
    ‚Äč
    <?php
        echo "</table></body></html>";
    ?>

Note: This is a quick dirty code, I was just testing the JQuery's behavior with big table size. What am I doing wrong here?

Thanks for any help!

EDIT: Turns out you have to import the JQuery CSS. Now the problem is, the dialog box opens at the center of the table. is there anyway for the dialog box to open at the center of the current screen? Thanks!

Answers


Add the jquery UI stylesheet

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />


Need Your Help

Laravel 4.2: ORA-01401: inserted value too large for column (Illuminate\Database\QueryException)

php oracle oracle11g eloquent oci8

I was migrating the following schema using Laravel 4.2 Eloquent, I am getting the following error. I don't know why this error occurs since I am new to Oracle. I can move on only if someone helps.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.