Question

在我的代码中我有一个问题，当我添加jquery对话框它不工作，我有一个jquery自动完成js也添加，它工作正常。我试过但它没有

当按钮（btn_view_p）点击我想在对话框中打开div id =“对话框”

任何想法

这是代码

<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.autocomplete.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        //-----------------------------------------------
        //-------------------------------------------------------------------
        $("#p_s_name").autocomplete("get_reg_num.php", {
            width: 260,
            matchContains: true,        
            selectFirst: false
        });
        $("#p_r_no").autocomplete("get_prisoners.php", {
            width: 260,
            matchContains: true,        
            selectFirst: false
        });
        //---------------------------------------

      $("#dialog").dialog({
              autoOpen:false,
              width:600,
              height:300,
              show:{
                  effect:"blind",
                  duration:1000
                  },
               hide:{
                   effect:"blind",
                   duration:1000
                   }      

          });
           $("#btn_view_p").click(function() {
          $("#dialog").dialog( "open" );
        });
    });
    </script>
    </head>

这是html代码

    <div id="content">
<table width="874" border="0" align="center" cellpadding="0" cellspacing="0" id="tb1">
  <tr>
    <td width="121">&nbsp;</td>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4" align="center"><h1>Find Prisoner</h1></td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td><p>Register Number</p></td>
    <td width="349"><label>
      <input type="text" name="p_s_name" id="p_s_name" class="backG">
    </label></td>
    <td width="162"><p>Enter The Name</p></td>
    <td width="242"><label>
      <input type="text" name="p_r_no" id="p_r_no" class="backG">
    </label></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="button" name="btn_view_p" id="btn_view_p" value="Find"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</div>



    <div id="dialog">

    <table width="830" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2" align="center">Details Of The Prisoner</td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>




    </div>

Answer 1

我没有看到jqueryui css文件。检查控制台是否有错误。

Answer 2

你遗漏了代码中的一些东西。首先是jquery-ui.css。 secon的事情是你需要预先隐藏你的对话框细节。这里是Pen的链接，我修改了你的代码，以便它可以工作。

Link for Codepen //对不起之前错误的链接

建议：我不知道你为什么使用表结构。尝试使用Div。

jquery对话框没有工作

2 个答案: