2014-02-04 3 views
0

Использование div divDialog для отображения диалогового окна jQuery UI. Появится диалоговое окно и отобразится сообщение. Но я не могу увидеть divsection divDialog на странице html в конце. Диалоговое окно «Мысль JQuery UI» скрывает его с отображением: нет, когда диалог инициализируется. Пробовал много способов отобразить его, но ничего не работает. Вставьте код, указанный нижеJQUERY UI Диалог, не отображающий div

<!DOCTYPE html> 
<html> 
<head> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
    <link rel="stylesheet" href="http://bbsmt01.dev.aapt.com.au:8080/testmanager/jquery/jquery-ui-themes-1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://bbsmt01.dev.aapt.com.au:8080/testmanager/jquery/jquery-ui-1.10.3/jquery-1.9.1.js"></script> 
    <script src="http://bbsmt01.dev.aapt.com.au:8080/testmanager/jquery/jquery-ui-1.10.3/ui/jquery-ui.js"></script> 
<script> 
$(function(){ 

     $("#divDialog").dialog({ 
       resizable: true, 
       autoOpen:false, 
       show: { 
         effect: "blind", 
         duration: 1000 
       }, 
       hide: { 
         effect: "explode", 
         duration: 1000 
       }, 
       modal: true, 
       width:400, 
       height:300, 
       buttons: { 
         ok: function() { 
           $(this).dialog('close'); 
         } //end cancel button 
       }//end buttons 

     });//end dialog 

       $("#divDialog").html("<b>test123</b>"); 
       $("#divDialog").dialog('option','title','Display Example'); 
       $('#divDialog').dialog('open'); 


}); 
</script> 
</head> 

<body> 
<p>Demonstrate JQUERY UI DIalog box.</p> 
<br><br> 
<div id="div1" class="gen" style="width:80px;height:80px;background-color:red;"></div><br> 
<div id="div2" class="gen" style="width:80px;height:80px;background-color:green;"></div><br> 
<div id="div3" class="gen" style="width:80px;height:80px;background-color:blue;"></div> 
<div id="divDialog" style="width:80px;height:80px;background-color:blue;">testdivDialog</div> 
</body> 
</html> 
+0

почему у вас есть 2 разные версии JQuery? удалить 'jquery-ui-1.10.3/jquery-1.9.1.js'? и проверьте –

+0

также проверьте, есть ли файлы 'http: //bbsmt01.dev.aapt.com.au: 8080/testmanager/jquery/jquery-ui-1.10.3/jquery-1.9.1.js' существует –

+0

jquery dialog удаляет div из его местоположения в DOM, когда он открывает/создает диалог и помещает его в другой DIV для диалога. В диалоге destroy, он возвращает div обратно в исходное место в DOM. –

ответ

1

диалога JQuery удаляет DIV из его расположения в DOM, когда она открывает/создает диалоговое окно и помещает его в пределах другого DIV для диалога с классом "UI-диалог". В диалоге destroy, он возвращает div обратно в исходное место в DOM. Эта связь объясняет это лучше:

Jquery Dialog - div disappears after initialization

+0

Большое спасибо за информацию – Arav

0

У вас есть две версии jQuery на вашей странице. Если вы хотите использовать две или более версии jQuery, вы должны использовать метод jQuery .noConflict(). В любом случае, проверьте этот простой диалог http://api.jqueryui.com/dialog/. Надеюсь это поможет!

+0

Большое спасибо за информацию – Arav

0

Вот ваш рабочий код ...

Fiddle

Ваш DIV с идентификатором divDialog удаляются, когда вы всплывать его ..

Создать DIV с другим идентификатором

подобный ..

<p>Demonstrate JQUERY UI DIalog box.</p> 
<br><br> 
<div id="div1" class="gen" style="width:80px;height:80px;background-color:red;"></div><br> 
<div id="div2" class="gen" style="width:80px;height:80px;background-color:green;"></div><br> 
<div id="div3" class="gen" style="width:80px;height:80px;background-color:blue;"></div> 
    <br> 
<div id="divDialog1" style="width:80px;height:80px;background-color:blue;">testdivDialog</div> 

<div id="divDialog" style="width:80px;height:80px;background-color:blue;"></div> 

Примечание: пожалуйста, не включают в себя так же каркасные несколько раз ..

+0

Спасибо большое за информацию – Arav

+0

Больше всего приветствую ... –

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