JQUERY UI对话框未显示div
[英]JQUERY UI Dialog not showing the div
问题描述
Using the div divDialog for displaying the jquery UI Dialog box. 
使用div divDialog显示jquery UI对话框。 Dialog window pops up and display the message. 弹出对话框并显示消息。 But I am not able to see the divsection divDialog in the html page at the end. 但是我无法在html页面的末尾看到divsection divDialog。 Thought Jquery UI dialog code is hiding it with display:none when dialog is initialized. 当初始化对话框时，以为Jquery UI对话框代码使用display：none隐藏了它。 Tried many way to display it but nothing is working. 尝试了多种显示方式，但没有任何效果。 Pasted the code below 粘贴下面的代码
<!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>
3 个解决方案
解决方案1
1 已采纳 2014-02-04 06:37:50
jQuery dialog removes the div from it's location in the DOM when it opens/creates the dialog and places it within a different DIV for the dialog with class "ui-dialog". jQuery对话框在打开/创建对话框时将div从DOM中的位置移除，并将其放置在类为“ ui-dialog”的对话框的其他DIV中。 On dialog destroy, it returns the div back into it's original place in the DOM. 在对话框销毁时，它将div返回到其在DOM中的原始位置。 This link explains it better: 该链接对其进行了更好的解释：
Jquery Dialog - div disappears after initialization jQuery对话框-初始化后div消失
解决方案2
0 2014-02-04 06:33:49
You have 2 versions of jQuery in your page. 您的页面中有2个版本的jQuery。 If you want to use two or more versions of jQuery, you should use the jQuery .noConflict() method. 如果要使用两个或多个版本的jQuery，则应使用jQuery .noConflict()方法。 Either way, check this simple dialog tutorial http://api.jqueryui.com/dialog/ . 无论哪种方式，请查看此简单的对话框教程http://api.jqueryui.com/dialog/ 。 Hope this helps! 希望这可以帮助！
解决方案3
0 2014-02-04 06:37:47
Here is your working code... 这是您的工作代码...
Your div with id divDialog get removed when you popup it.. 弹出时，ID为divDialog div divDialog被删除。
Create new div with different id 创建具有不同ID的新div
like.. 喜欢..
<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>
Note : please do not include same framework multiple times.. 注意 ：请不要多次包含相同的框架。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.