Question

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

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

以下是我正在使用的代码段：

$(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");
  }
});

提前致谢。

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

如何连续打开对话框而不覆盖

1 个答案: