Показать простой диалог модальный с помощью JQuery

Там есть простой следующий ДИВ:Показать простой диалог модальный с помощью JQuery

<div id="dialogg"> 
    Hello, world! 
</div>

Некоторые CSS стиль:

#dialogg { 
    display: none; 
}

И JQuery код:

<script src="assets/js/jquery-1.9.1.min.js"></script> 
<script src="assets/js/jquery-ui-1.10.2.custom.js"></script> 
<script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#dialogg').dialog({ 
      autoOpen: false; 
      width: 400; 
     }); 
     $('#dialogg').dialog('open'); 
    }); 
</script>

Но я не вижу никаких диалоговых окон ! Как я могу это исправить? Что не так?

UPDATE:

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Исторический турнир</title> 
    <link rel="stylesheet" type="text/css" href="assets/css/main-styles.css"> 
    <link rel="stylesheet" type="text/css" href="assets/css/departments-page-styles.css"> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="assets/js/jquery-1.9.1.min.js"></script> 
    <script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#dialogg').show(); 
      $('#dialogg').dialog({ 
       autoOpen: false; 
       width: 400; 
      }); 
      $('#dialogg').dialog('open'); 
     }); 
    </script> 
</head>

Но этот код не работает до сих пор.

источник

2013-04-09 user2218845

вам не нужно два ui.js сценария там удалить один .. и выглядит, как вы забыли загрузить файл CSS

добавить это поверх сценария ..

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

так полный код должен быть

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script src="assets/js/jquery-1.9.1.min.js"></script> 
<script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#dialogg').dialog({ 
     autoOpen: false; 
     width: 400; 
    }); 
    $('#dialogg').dialog('open'); 
}); 
</script>

источник

2013-04-09 07:55:55 bipen

Пожалуйста, обратите внимание на мои обновления. – user2218845

вы не ожидая HTML документ, который будет полностью загружен полностью, насколько браузер обеспокоен, когда вы выбираете $('#dialog') не существует. Вы можете использовать либо <script>...</script> ниже в HTML или добавить функцию в $('document').ready(function(){..});

источник

2013-04-09 07:57:25

'$ (function() {' является ярлыком для document.ready .. – bipen

мой плохой тогда :), я не знал этого, спасибо –

пожалуйста, попробуйте следующее:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

и просто попробовать: $("#dialogg").dialog();

<script> 
$(function() { 
    $("#dialogg").dialog(); 
}); 
</script>

см DEMO

example on jquery site

источник

2013-04-09 08:31:53

Кроме того, это неверно:

$('#dialogg').dialog({ 
    autoOpen: false; 
    width: 400; 
});

должно быть:

$('#dialogg').dialog({ 
    autoOpen: false, 
    width: 400 
});

источник

2013-10-23 15:17:52 user2912019

Показать простой диалог модальный с помощью JQuery

ответ

Смежные вопросы