在模式中启动模式

Question

I want to launch a modal in a modal. It's actually working, but if I open the 2nd modal in the 1st modal, the 2nd modal appears, but behind the 1st modal and the scroll bar disappear, when I close the 1st modal: modal

The JavaScript is in my modal PHP file.

How can I solve this problem?

Javascript

$(document).ready(function() {
  $('.relations').click(function(e) {
    var checkBoxes = $("input[name=case]");
    var checkedBoxes = checkBoxes.filter(":checked");

    if (checkedBoxes.length === 0) {
      return false;
    }
    e.preventDefault();

    var insert = [];

    $('.checkboxes').each(function() {
      if ($(this).is(":checked")) {
        insert.push($(this).val());
      }
    });
    insert = insert.toString();

    var data_id = $(this).attr("id");
    $.ajax({
      url: "nodes.php",
      method: "post",
      dataType: "json",
      data: {
        data_id: data_id,
        insert: insert
      },
      success: function(data) {
        $('#moreInfo').html(data);
        $('#dataModal').modal("show");
        var nodeDatas = new vis.DataSet();
        nodeDatas = data;

        $.ajax({
          method: "post",
          dataType: "json",
          url: "edges.php",
          data: {
            data_id: data_id
          },
          success: function(data) {
            var edgeDatas = new vis.DataSet();
            edgeDatas = data;
            var myDiv = document.getElementById("moreInfo");

            data = {
              nodes: nodeDatas,
              edges: edgeDatas
            };

            var options = {
            };
            var network = new vis.Network(myDiv, data, options);
          }
        });
      }
    });
  });
});

Answer 1

I'm assuming that the second modal is moreInfo div, if that's correct, you need to make few css changes for that element to appear on top of the first modal, using z-index:99999; maybe more, and also for the scrollbar to appear you need another css property overflow:scoll;

I hope this helps!