0

我有这样的Ajax功能：

function generate_summary() {
    var summary_input=document.getElementById('summary_input').value;
    var email_notify=document.getElementById('email_notify').value;
    var num_sent=document.getElementById('num_sent').value;
      $.ajax({
                type: "GET",
                url: "/summary/",
                data: {summary_input:summary_input, email_notify:email_notify, num_sent:num_sent},
                success: function(data){
                     $('#modal-body').html(data)
                }
            });

}

我有href这样的：

<a onclick="generate_summary()"  href="#summaryModal" style="text-decoration:none;" id="summarize_btn" role="button" class="btn btn-success offset3" data-toggle="modal">Summarize</a>

模态看起来像这样：

<!-- Summary output popup  -->
<div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Summary</h3>
  </div>
  <div class="modal-body" id="modal-body">
    <textarea disabled id="summary_output" name="summary_input" rows="15" class="span5"></textarea> 
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

单击汇总按钮时，模式是一个弹出窗口。

服务器的输出放置在：

  <div class="modal-body" id="modal-body">
    <textarea disabled id="summary_output" name="summary_input" rows="15" class="span5">{{ summary }}</textarea> 
  </div>

Ajax function, modal一切正常。但是模态加载如此之快，该函数仅返回10-15 secs. 我想同时显示弹出模式和摘要。我怎样才能做到这一点？

4

1 回答 1

0

要使用 jquery 对话框，您必须在项目中引用 jquery.ui js 和 css 文件。

首先使 summaryModal 成为一个 jquery 对话框：

$("#summaryModal").dialog({ autoOpen: false, buttons:
        {
            "Save": function () {
                if (!confirm("Do you want to save the changes?")) {
                    return;
                }
                //Add your logic to save.

                $("#summaryModal").dialog('close');
            },
            "Cancel": function () {
                $("#summaryModal").dialog('close');
            }
        }
    });

之后，当您单击 summarise_btn 时，进行 ajax 调用并在对话框中加载内容：

$("#summarize_btn").click(function () {
        $.ajax({
            type: "GET",
            url: "/Home/About",
            success: function (data) {

                $("#summaryModal").dialog("option", "height", 500);
                $("#summaryModal").dialog("option", "width", 500);
                $("#summaryModal").dialog("option", "title", 'Modal Title');
                $("#summaryModal").dialog("option", "modal", true);
                $("#summaryModal").dialog('open');

                $('#summaryModal').html(data);
            }
        });
    });

summaryModal div 看起来像：

<div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

</div>
于 2013-04-15T12:24:34.850 回答