Question

我有一个测试php文件，在一个表中有50个按钮（只是为了制作一个大表）。单击第一个按钮时，我想要一个JQuery对话框，其中有一个html文本框可以通过JQuery打开。目前，代码打开文本框，但位于屏幕底部。那是在桌子下面。我的目标是在当前屏幕的中心打开，即不被用户向下滚动。这是我的代码：

 <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>";
    ?>

注意：这是一个快速的脏代码，我只是用大表大小来测试JQuery的行为。我在这做错了什么？

感谢您的帮助！

编辑：原来你必须导入JQuery CSS。现在的问题是，对话框在表的中心打开。无论如何，对话框是否在当前屏幕的中心打开？谢谢！

Answer 1

添加jquery UI样式表

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

Answer 2

我终于弄清楚我的程序出了什么问题。在HTML中，我没有提供

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在给出这个之后，对话框在当前屏幕中居中！

JQuery对话框没有出现在当前屏幕中心

2 个答案: