Question

使用div divDialog显示jquery UI对话框。弹出对话框窗口并显示消息。但是我最终无法在html页面中看到divsection divDialog。想法Jquery UI对话框代码在初始化对话框时使用display：none隐藏它。尝试了很多方式显示它但没有任何工作。粘贴下面的代码

<!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>

Answer 1

jQuery对话框在打开/创建对话框时将div从其在DOM中的位置移除，并将其放置在具有类“ui-dialog”的对话框的不同DIV中。在对话框销毁时，它将div返回到DOM中的原始位置。此链接更好地解释了它：

Jquery Dialog - div disappears after initialization

Answer 2

您的网页中有两个版本的jQuery。如果要使用两个或更多版本的jQuery，则应使用jQuery .noConflict()方法。无论哪种方式，请查看这个简单的对话教程http://api.jqueryui.com/dialog/。希望这有帮助！

Answer 3

这是您的工作代码......

<强> Fiddle

当您弹出它时，ID为divDialog的div会被删除..

创建具有不同身份的新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>

注意：请不要多次包含相同的框架..

JQUERY UI对话框没有显示div

3 个答案: