Question

我有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>

我已经在任何地方添加了pre-wrap，但文字似乎只有一行。文本在数据库中格式正确。

JQuery代码：

$('.opener').each(function() {
    var dialog = $(this).prev('.dialog').dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $(this).click(function () {
        dialog.dialog("open");
        });
    });
});

Answer 1

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

jQuery UI对话框需要（1）jQuery UI css引用，AS WELL AS（2）jQuery UI代码，AS WELL AS（3）plain ol＆＃39; jQuery的。

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

建议：

删除代码中对jQuery / jQuery UI的所有引用，并在页面的<head>标记内添加以下行：

<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版本。如果它有效，你甚至可以坚持下去。

参考：

Matching jQuery and jQuery-UI versions

Answer 2

这是一个应该有效的代码：

＆＃13;

 
  <title>jQuery UI Dialog - Animation</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>

<body>
    <table>
        <tr>
            <td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-: ;style:ridge;white-space: pre-wrap">
                <div id="dialog" title="Basic dialog">
                     <%=solution%>
                </div>
 
                <button id="opener">Open Dialog</button>
            </td>
            </tr>
        </table>

＆＃13;

http://fiddle.jshell.net/0n4exLq8/

对于格式化问题，看起来您的数据库中有换行符，html将无法呈现。您必须在服务器端格式化字符串（将{n替换为<br />）或更好地将其转换为<ol>

Answer 3

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

我只是test your example，它在IE 11中运行得很好。

HTML：

<div class="dialog">
    <p style="white-space: pre-wrap">123123123</p>
</div>

<button class="opener">Open Dialog</button>

JS：

$('.opener').each(function(){
    var dialog = $(this).prev('.dialog').dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $(this).click(function () {
        dialog.dialog("open");
    });

});

Answer 4

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

您只需要一个对话框，只需重复使用即可。

首先，了解jQUI对话框的工作原理非常重要。你＆＃34;分配＆＃34;初始化时对话框的元素（div）：

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

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

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

对话框显示该div的内容。

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

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

在你的程序中，按下按钮时你需要做的就是获取数据（通过ajax，或者从隔壁的单元格，或者从下面的单元格中获取）并将其粘贴到对话框的div中，然后打开对话框。

关闭对话框时，最好还清除div：

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

jsFiddle Demo

jQueryUI对话框看起来不正确（缺少样式？）

4 个答案: