CODEWITHSUNDEEP
javascriptjquery
bael
bael

Reputation: 29

Launch modal in modal

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);
          }
        });
      }
    });
  });
});

Upvotes: 0

Views: 49

Answers (1)

Waheed
Waheed

Reputation: 638

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!

Upvotes: 1

Related Questions