Отображение диалога JQuery UI, не работает как диалог

Question

Проблема:

Диалоговое окно 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>

Answer 1

Поместите инициализатор в ваш документ.

Answer 2

Попробуйте это,

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

Answer 3

Попробуйте вставить свой код jQuery в функцию $(document).ready следующим образом:

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

});

Answer 4

Почему бы вам просто не поместить функцию диалога в обработчик события click?