如何在不覆盖的情况下连续打开对话框答案

【问题标题】：How to open the dialog box continuously without overwriting如何在不覆盖的情况下连续打开对话框
【发布时间】：2016-11-17 05:54:22
【问题描述】：

我试图在 for 循环中显示对话框，但始终显示最后一个。它正在覆盖现有的。

有没有其他方法可以一一显示对话框？例如，for 循环大小为 2。在迭代中，第一个被打开。如果我关闭第一个，那么第二个就会这样打开。

以下是我正在使用的代码 sn-p：

$(document).ready(function() {


  $("#warningMessage").dialog({
    dialogClass: "no-close",
    autoOpen: false,
    height: 400,
    width: 400,
    modal: true,
    buttons: {
      "YES": function() {
        var me = jQuery(this);
        me.dialog("close");
      },
      "NO": function() {
        var me = jQuery(this);
        me.dialog("close");
      },
    }
  });
  var sample = ["AAAA", "BBBB"];
  for (i in sample) {
    $("#warningMessage").html(sample[i]);
    $("#warningMessage").dialog("open");
  }


});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js" integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA=" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
</head>

<body>
  <div id="warningMessage">
  </div>
</body>

</html>

HTML：

<div id="warningMessage">
</div>

Javascript：

$(document).ready(function() {
  $("#warningMessage").dialog({
    dialogClass: "no-close",
    autoOpen: false,
    height: 400,
    width: 400,
    modal: true,
    buttons: 
    {
        "YES" : function(){
          var me = jQuery(this);
          me.dialog("close");
        },
        "NO" : function(){
          var me = jQuery(this);
          me.dialog("close");
        },
    }
  });
var sample = ["AAAA","BBBB"];
  for(i in sample){
    $("#warningMessage").html(sample[i]);
    $("#warningMessage").dialog("open");
  }
});

提前致谢。

【问题讨论】：

请将所有相关代码包含在 OP 中
这段代码中只有一个对话框..您应该为此使用不同的框
@sherin Jose。我想根据 for 循环大小动态显示对话框

标签： javascript jquery jquery-ui dialog

【解决方案1】：

你可以使用这样的队列：

$(document).ready(function() {

    var queue = [];

    $(".warningMessage").dialog({
        dialogClass: "no-close",
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true,
        buttons: {
            "YES": function() {
                var me = jQuery(this);
                me.dialog("close");
            },
            "NO": function() {
                var me = jQuery(this);
                me.dialog("close");
            },
        }
    }).on("dialogclose", function(event, ui) {
        if (queue.length)
            $(".warningMessage").html(queue.shift()).dialog("open");
    });
    var sample = ["AAAA", "BBBB"];
    for (i in sample) {
        queue.push(sample[i]);
    }
    $(".warningMessage").html(queue.shift()).dialog("open");
});

演示： https://jsfiddle.net/iRbouh/dno04zpz/17/

【讨论】：