在进行数据库查询时显示模态 Window

Question

我有如下表格：

<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 数据库中。我想在用户等待查询完成时显示某种消息（模态 window）。用户在查询过程中不能进行任何操作。

我该怎么做？

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

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

Answer 1

showModalDialogue() 仅适用于 IE。正如所建议的那样，您需要一个 javascript 模态 window。周围有很多模态库，但如果您想做一些简单的事情，那么这里有一个仅需要 jquery 的 DIY 模态。此代码段将运行就在此处。

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>

在进行数据库查询时显示模态 Window

Show a Modal Window while a db query is taking place

javascript

forms

vbscript

asp-classic