Question

我有一个jquery ui对话框，它初始化为

jQuery("#dialog-message").dialog({
    autoOpen: false,
    modal: true,
    width:500,
    buttons: {  Ok: function () {jQuery(this).dialog("close");  }}
});

单击下面给出的指定范围ID

时打开

jQuery(document).delegate("#samno","click",function () {
    var usin=jQuery(this).text();
    jQuery.post("scripts/sample_counts.php",{"usin":usin}, function(data) {
        jQuery('#dialog-message').html(data);
        jQuery('#dialog-message').dialog('open');
        return false;
    });     
});

此消息的实际div是：

<div id="dialog-message" class="dialog"  title="Counting Data"></div>

以下css也在页面中：

  .no-close .ui-dialog-titlebar-close {  display: none;}

  div.ui-dialog {
    font-size:12px;
    color:#333333;
  }

  .ui-dialog.table {
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
  }

从邮件请求收到的数据包含一个表格。我定义了一个名为msg_tble的类，并尝试在表上应用它。但它没有用。

知道如何在对话框中为表格使用css吗？

根据Arun P Johny的建议，我正在分享表格标记

echo "<table><tr><th>Counting Date</th><th>System ID</th><th>Counting    Time(Sec)</th><th>CPM</th></tr>";
                while($data2=mysql_fetch_array($result3)){

                echo "<tr>";
                echo "<td>".$data2['count_date']."</ts>";
                echo "<td>".$data2['counter_id']."</td>";
                echo "<td>".$data2['count_time']."</td>";
                echo "<td>".$data2['cpm']."</td>";
                echo "</tr>";

                }
                echo "</table>";

Answer 1

而不是

.ui-dialog.table {
  border-width: 1px;
  border-color: #a9c6c9;
  border-collapse: collapse;
}

尝试：

#dialog-message table {
  border-width: 1px;
  border-color: #a9c6c9;
  border-collapse: collapse;
}

使用jQueryUI对话框，对话框内容的行为就像它们是“对话框”DIV的一部分一样。

也就是说，无论您使用哪个div进行对话 - 您对该div执行的任何样式，或该div的内容，都将反映在对话框中。只是将内容设置为#dialog-message div的一部分，并忘记它们在对话框中的事实，并且真正的幸福将是你的。

jsFiddle Demo

编辑：

我刚刚阅读了您的问题下方的评论，我看到Austin Mullins有一个应该有效的解决方案，它会回答您关于在对话框中添加类的问题。我希望他能将它作为一个答案添加，以便它可以被投票。

但是，它确实很简单。 _{对John R的安静感谢}

Answer 2

此方法的有效性取决于“sample_counts.php”返回的确切内容。在我的testing on JSFiddle中，我发现了两种在不同情况下有效的方法。

如果<table>元素是文档的 root ，则以下内容有效：

function(data) {
    $dialog = jQuery('#dialog-message');
    $data = $(data);
    $data.addClass("msg-table");

    $dialog.html($data).dialog('open');
    return false;
}

在这个测试中，我让echo端点返回以下HTML：

<table>
    <tr><th>Usin</th></tr>
    <tr><td>Samno</td></tr>
</table>

请注意，在这种情况下，我们希望表本身没有周围的容器。另一方面，如果该表是较大文档的一部分，则以下工作：

function(data) {
    $dialog = jQuery('#dialog-message');
    $data = $(data).find("table");
    $data.addClass("msg-table");

    $dialog.html($data).dialog('open');
    return false;
}

请注意使用find()函数来访问第一个<table>元素。以下是用于测试它的示例HTML：

<div>
  <table>
    <tr><th>Usin</th></tr>
    <tr><td>Samno</td></tr>
  </table>
</div>

Answer 3

// Use 'dialogClass' property.    
     $( ".selector" ).dialog({
        dialogClass: "alert"
     });

Answer 4

我只是在主页面中添加了以下css

div#dialog-message table {
    margin: 1em 0;
    border-collapse: collapse;
}

div#dialog-message table td,  div#dialog-message table th {

    border: 1px solid #eee;
    border-color:#CC0033;

    padding: .6em 10px;

    text-align: left;

}

这解决了这个问题。没有其他变化。谢谢每个提出建议/答案的人

将类应用于jquery ui对话框

4 个答案: