Помощь с диалоговым окном пользовательского интерфейса jQuery

Я использую jQuery UI.Dialog. У меня небольшая проблема: когда я нажимаю ссылку, чтобы показать диалоговое окно, текст из #Test исчезает, и отображается модальное наложение, но фактическое модальное окно не отображается.

Используя FireBug, диалоговое окно создается, но имеет Display:None, поэтому не отображается. Кроме того, если я изменю это в firebug на Display:Block, диалоговое окно отображается, но оно находится в левой части моей страницы... есть предложения?

Мой код очень прост:

<head>
<link href="Vader/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css">
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/ui.core.js" type="text/javascript"></script>
<script src="javascripts/ui.draggable.js" type="text/javascript"></script>
<script src="javascripts/ui.resizable.js" type="text/javascript"></script>              
<script src="javascripts/ui.dialog.js" type="text/javascript"></script>     
    <script type='text/javascript'>
    $(function() {
        $("a").click(function(){
            $('#Test').css('display','inline');
            $("#Test").dialog({modal: true});
        });
    });
</script>
</head>
<body>
    <a href="#">Test</a>
    <div id="Test" title="Test Title">Bla bla bla</div>
</body>

javascript jquery jquery-ui jquery-ui-dialog
person Community    schedule 26.03.2009    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Возможно, вы захотите добавить к клику e.preventDefault(); поэтому он не пытается загрузить #, который может обновить страницу.

    $("a").click(function(e){
        e.preventDefault();
        $('#Test').css('display','inline');
        $("#Test").dialog({modal: true});
    });
person joelpittet    schedule 27.03.2009

arrow_upward
0
arrow_downward

Я предполагаю, что он не подбирает ваш файл css, вы подтвердили, что это действительно так?

Насколько я могу судить, в вашем коде нет ничего плохого, следующий тест работает в моем файле песочницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
  <meta http-equiv="Content-Type" content="application/text+html;utf-8"/>

  <title>Sandbox</title>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript">

      $(document).ready(function() {
        $("a").click(function(){
            $('#Test').css('display','inline');
            $("#Test").dialog({modal: true});
        });


    });
</script>
</head>
<body>
    <div id="container">
        <a href="#">Test</a>
        <div id="Test" title="Test Title">Bla bla bla</div>
    </div>
</body>

</html>
person Steerpike    schedule 26.03.2009
comment
Думаю, я нашел проблему... Я использую JQuery, который поставляется с Aptana, V1.2.1. Ошибка школьника. Я потратил на это 2 чертовых дня. Спасибо чувак. - person ; 26.03.2009
comment
Хех, вот почему я всегда использую jquery и css/ui с внешних серверов, когда тестирую :) - person Steerpike; 26.03.2009

arrow_upward
0
arrow_downward

‹A> не является структурой блочного уровня, что может вызвать некоторые проблемы.

Попробуйте заключить его в DIV, а затем сделайте этот div в диалоговом окне.

person Seb    schedule 26.03.2009

arrow_upward
0
arrow_downward

У меня была такая же проблема, и оказалось, что файл CSS не найден. Используйте firebug для загрузки файла css. Вы можете обнаружить, что в Firebug отображается сообщение «404 Not found».

person Karim    schedule 26.03.2009