Javascript jQueryUI对话框不'；看起来不对劲（缺少款式？）

我有IE 11，我试图打开一个对话框，点击一个按钮，但正在打开的对话框不是我想要的。它没有一个关闭图标，布局也很差

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="//malsup.github.com/jquery.form.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-style:ridge;white-space: pre-wrap">
    <div class="dialog">
        <p style="white-space: pre-wrap"><%=solution%></p>
    </div>
    <button class="opener">Open Dialog</button>
</td>

---

下面是一个应该可以工作的代码：

jQueryUI对话框-动画
$（函数（）{
$（“#对话框”）。对话框({
自动打开：错误，
展示：{
效果：“盲”，
持续时间：1000
},
隐藏：{
效果：“爆炸”，
持续时间：1000
}
});
$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
});
打开对话框

它没有一个关闭图标，布局也很差

我只是，它在IE11中工作得非常好

HTML:

---

使用jQueryUI对话框有一种更简单的方法

您只需要一个对话框，就可以重复使用它

首先，了解jQUI对话框的工作原理很重要。在初始化对话框时，可以将一个元素（div）“分配”给该对话框：

$('#msg').dialog();

此后，无论何时调用对话框的open方法

$('#msg').dialog('open');

将显示包含该div内容的对话框

要更改对话框的内容，只需更改该div的内容：

$('#msg').html('<p>Here is some totally new information</p>');
$('#msg').dialog('open');

---

啊哈。。。我重读了你的问题，我想我理解你所看到的问题

jQueryUI对话框需要（1）jQueryUICSS引用，（2）jQueryUI代码，以及（3）普通的jQuery

同样重要的是，您需要匹配版本。当版本不匹配时（特别是当jQUI和jQUI的css用于不同的版本时），按钮将不对齐，边框将丢失，整个外观将被破坏。您有itis版本（注意：-itis是表示疼痛的拉丁后缀）

建议:

删除代码中对jQuery/jQuery UI的所有引用，并在页面的

标记中添加以下行：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

这将为您提供一个已知可以协同工作的jQuery/jQueryUI/css版本。如果有效，你甚至可以坚持下去

---

参考：

---

添加图像以显示对话框我正在更新我的答案，以解决字符串格式问题

这不是正确的HTML。猜这是打字错误吗？我可能知道发生了什么：版本炎。请看下面我的新答案。但是我如何添加这么多的

，顺便说一句，在

textarea

textarea中获取这些内容时，它的工作很好。在格式化方面，textarea更灵活一些。假设您正在使用php，请尝试使用“nl2br（）”：string=string.replaceAll（“\n”，“
”）应该执行以下操作：我正在获取功能，但是格式化和布局对于您的div来说非常糟糕。您对jQUI div内容所做的任何HTML/CSS格式化都将显示在对话框中。没有什么神奇的事情发生——jQUI对话框只是精确地显示指定div的内容。@事实上，如果您暂时忘记该对话框，您的工作会更轻松。创建一个可见的div，

，当用户按下按钮时，获取所需数据并将其粘贴到

mytest

div中。解析数据，根据需要格式化数据，使其在每次按下按钮时完全符合您的要求。（记住，对于测试，该div是可见的）然后，用该div初始化jQUI对话框：

$（'mytest'）.dialog（{autoOpen:false，etc}）我保证你会对结果感到满意。这绝对是问题所在。。但是上面的版本仍然不起作用，也许其他的版本也能起作用
$('#msg').dialog('open');

$('#msg').html('<p>Here is some totally new information</p>');
$('#msg').dialog('open');

$( "#dialog" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    duration: 1000
  },
  close: {
    effect: "explode",
    duration: 1000,
    function(){
       $('#msg').html('');
    }
  }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>