Question

我正在使用jquery UI对话框在Web应用程序中显示消息。我知道如何在对话框中显示元素（在我的情况下是一个按钮和一个文本区域）的唯一方法是将它们添加到主HTML页面并调用包含我想要显示的元素的div，就像这样：

HTML已添加到我的index.html

    <!-- Message box -->
    <div id="messageBox">
        <div id="confirmErrorContainer">
            <span id="messageText"></span>
            <textarea class="skuValidationElement" id="skuValidationList" rows="10" cols="10"></textarea>
            <div id="buttonContainer">
                <button class="confirmDialogElement skuValidationDialogElement"
                    id="confirmError">Okay</button>
            </div>
        </div>
    </div>

通过JQuery打开对话

$("#messageBox").dialog("open");

我最初隐藏元素，在打开对话框时显示它们，并在单击“确定”按钮时隐藏它们。必须有一种更简单的方法来做到这一点。我可以将html存储在单独的文件中然后加载吗？

Answer 1

您只需将display:none添加到您的css：

即可

#messageBox {
  display: none;
}

当您调用.dialog()时，您不必显示元素，因为它使用您提供给函数的选择器复制它找到的html。对话框关闭后，您也不必再次隐藏它。

Answer 2

您只需要确认框： -

<强> jQuery的：

$(function() {
    $( "#messageBox" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      autoOpen: false,
      buttons: {
        "Close": function() {
          $( this ).dialog( "close" );
        },
        "ok": function() {
          $( this ).dialog( "close" );
        }

Answer 3

使用jQuery load方法，所以在您的示例中：

$("#messageBox").load(path_to_external_html).dialog("open");

将messageBox div作为空div准备好接收外部html。

Answer 4

以下CSS怎么样？

#messageBox textarea,
#messageBox button {
  display: none;
}

.dialog #messageBox textarea,
.dialog #messageBox button {
  display: block;
}

所以最初页面不会显示textarea和按钮。对话框打开后，它将更改元素的显示。 dialog类需要适应对话框打开时应用的类名。

如何在对话框窗口中包含HTML元素而不将它们显示在页面上？

4 个答案: