открыть модальный диалог jquery при загрузке страницы - PullRequest
4 голосов
/ 07 февраля 2009

У меня есть страница, я хочу, чтобы она отображала некоторое содержимое в модальном диалоговом окне (диалоговое окно jquery UI), как только страница загружена.

  $(document).ready(function(){
    $("#example").dialog();
  });

<div id="example" class="flora" title="This is my title">
    I'm in a dialog!
</div>

Спасибо

Ответы [ 2 ]

5 голосов
/ 07 февраля 2009

Ваш тег div не отформатирован должным образом, и его необходимо закрыть. Следующее сработало для меня, но для этого нужны правильные файлы CSS.

<html>
<head>
<script type="text/javascript" language="javascript"
        src="jquery/jquery.js"></script>
<script type="text/javascript" language="javascript"
        src="jquery/jquery.ui.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        $("#example").dialog({modal: true});
    });
</script>
</head>
<body>
    <div id="example" class="flora" title="This is my title">
        I'm in a dialog!
    </div>
</body>
</html>
0 голосов
/ 10 февраля 2009

Уэйн Хан прав в этом

поведение по умолчанию - открывать при вызове dialog (), если вы не установили autoOpen в false.

и у tvanfosson это почти правильно, хотя диалог по умолчанию не является модальным. Чтобы отобразить модальное окно, вы должны установить для параметра modal значение true

Чтобы проиллюстрировать, вот урезанная выдержка из небольшого проекта , над которым я работал сегодня вечером:

...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-ui-personalized-1.6rc6.min.js"></script>
<script type="text/javascript" src="./init.js"></script>
<link rel="stylesheet" href="./css.css" type="text/css" />
<script type="text/javascript">
    $(function() {
        $('#exampleNode').dialog({
            modal: 'true'
        });
    });
</script>
...

Для справки:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...