在进行数据库查询时显示模态窗口答案

【问题标题】：Show a Modal Window while a db query is taking place在进行数据库查询时显示模态窗口
【发布时间】：2016-12-18 10:02:17
【问题描述】：

我的表格如下：

<FORM id='CSVUpdateForm' action='update.asp' type='GET' target="responseFrame">
<input type='text' Name='PCNM' />
<INPUT TYPE='submit' name='ENTRY' >
</FORM>

现在在update.asp 我有一个VBScript 函数，它将向Oracle 数据库中插入一长串查询。我想在用户等待查询完成时显示某种消息（模式窗口）。在查询过程中，用户应该不能做任何操作。

我该怎么做？

我尝试使用showModalDialog("") 打开一个模态窗口，但这样做时只要打开它就会停止任何操作。

如何在处理查询时继续显示某种信息？查询完成后我想关闭窗口。

【问题讨论】：

问题与Oracle或mysql无关
@GurwinderSingh 嗨。尽管我打算将其包含在内，但我删除了它，因为我认为可能与 Oracle db 有某种关系。
我会采用的方法是使用light-box javascript 库来显示自定义消息并通过 AJAX 执行发布，这样您就可以检测脚本何时完成并关闭灯箱。 Here is a lightweight one 支持原生 Javascript 并显示自定义对话框。
@VanquiishedWombat 如果我打算这样做，我只需确保在通过 AJAX 调用长时间运行的脚本之前先填充消息。
@Lankymart 当然那也很好。但是例如说 OP 有 20 个查询要执行。如果他可以在每个完成时使用进度计数器 1 - 20 更新另一个表，那么他可以通过 ajax 读取它并在模式窗口中驱动一个进度条以提供更好的用户体验。

标签： javascript forms vbscript asp-classic

【解决方案1】：

showModalDialogue() 仅适用于 IE。正如建议的那样，您需要一个 javascript 模式窗口。周围有很多模态库，但如果你想做一些简单的事情，那么这里是一个只需要 jquery 的 DIY 模态库。这个 sn-p 将在 SO 中运行。

function doModal(opts) {

  $("body").data("cssoverflow", $("body").css("overflow"))
  $("body").css({
    overflow: "hidden"
  })

  $("#ovl").css({
    display: ""
  })
  $("#theTitle").html(opts.title)
  $("#theMsg").html(opts.message)

  $("#" + opts.eleId)
    .css({
      width: opts.w,
      height: opts.h,
      display: ""
    })
    .css({
      left: ($(window).width() - opts.w) / 2,
      top: ($(window).height() - opts.h) / 2
    })
}


$("#theButton").on("click", function(e) {

  alert("You clicked the button")

})

$("#theCloseButton").on("click", function(e) {
  $("body").css({
    overflow: $("body").data("cssoverflow")
  })
  $("#theModal").hide()
  $("#ovl").hide()
})

$("#theShowButton").on("click", function(e) {
  // Call doModal with options as below to open the modal
  doModal({
    eleId: "theModal",
    w: 500,
    h: 250,
    title: "Something happens",
    message: "Somewhere a server is busy doing something..."
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ovl" style="position: absolute;display:none;top:0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black;"></div>
<div id="theModal" style="position: absolute;display:none;border: 1px solid silver; background-color: white; padding: 25px; z-index: 10;">
  <h1 id="theTitle">
  Message title
  </h1>
  <p id="theMsg">
    Your message goes here....
  </p>
  <button id="theCloseButton">
    Close
  </button>
  <p>

  </p>
</div>

<p style="height: 500px;">

  <button id="theButton">
    Click me
  </button>
  <button id="theShowButton">
    Show modal
  </button>
</p>

【讨论】：