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

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数据库中插入一长串查询。 我希望在用户等待查询完成时显示某种消息（模态窗口）。在查询过程中，用户不应该执行任何操作。

我该怎么做？

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

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

Answer 1

showModalDialogue（）仅限IE。正如所建议的那样，你需要一个javascript模态窗口。有许多模态库，但如果你想做一些简单的事情，那么这里是一个只需要jquery的DIY模式。这段代码将在SO中运行。

＆＃13;

＆＃13;

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..."
  })
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;