JQuery UI对话框显示,不作为对话框工作

时间:2011-08-15 08:58:20

标签: javascript jquery html jquery-ui jquery-ui-dialog

问题:

对话框div显示时没有按下按钮,按下它们时不显示为叠加。我正在撕扯我的头发,所以提前谢谢。

代码:

包括:

<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.autocomplete.js"></script>
<script src="js/ui/jquery.ui.dialog.js"></script>

的CSS:

<link rel="stylesheet" type="text/css" href="css/jquery.ui.autocomplete.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.all.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.theme.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.dialog.css" />

按钮:<a class="phoneadder">Stuff</a>

脚本:

<script>
        $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true
        }
    );
        $( ".phoneadder" ).click(function() {
            $( "#dialog-form" ).dialog( "open" );
            return false;
        });
    </script>

对话框:

<div id="dialog-form" title="Create new phone">
    <p>All form fields are required.</p>

    <form>
    <fieldset>
        ...some html here
    </fieldset>
    </form>
</div>

4 个答案:

答案 0 :(得分:2)

将初始化程序放在document.ready中,或者作为简写:

$(function() { $("#dialog-form").dialog(autoOpen... ); } );

或者,确保在创建div之后运行脚本,就像在页脚中一样。

答案 1 :(得分:1)

尝试将jQuery代码放在$(document).ready函数中,如下所示:

$(document).ready(function () { 
/// your code here

});

答案 2 :(得分:1)

试试这个,

  $(function()
  {
    $( ".phoneadder" ).click(function() {
       $( "#dialog-form" ).dialog({
        height: xxx,
        width: xxx,
        modal: true
       });
       return false;
    });
  });

答案 3 :(得分:0)

为什么不将对话框功能放在点击事件处理程序中?

<script>
      $(function()
      {
        $( ".phoneadder" ).click(function() {
           $( "#dialog-form" ).dialog({
            height: 300,
            width: 350,
            modal: true
           });

           return false;
        });
      });
</script>