Question

点击li on grey header可弹出多个模态。我想拖动我想要的模态但是在这个小提琴中https://jsfiddle.net/jz2cqvyn/3/ 我只能拖动最后一个弹出的模态。我该怎么做？

$(document).ready(function(){

  $('li').click(function() {
    id = $(this).attr('id');
    imgsrc = $(this).children('img').attr('src');

    modaldiv = $('.modalExample').html();
    modaldiv = modaldiv.replace("myModal", "myModal_"+id);
    modaldiv = modaldiv.replace("fakimg", imgsrc);
    $('.area').append(modaldiv);

    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
      $('.modal-dialog').css({
        top: 200,
        left: 0
      });
    }

    $('#myModal_'+id).modal({
      backdrop: false,
      show: true
    });

    $('.modal-dialog').draggable({
      handle: ".modal-body"
    });
  });
});

Answer 1

这是一个很好的问题。我想，我解决了。你需要做的就是让后面的模态窗口可以点击。休息很好。

尝试以下代码。检查我在底部添加的1行。如果有效，请告诉我。

$('li').click(function() {
    id = $(this).attr('id');
    imgsrc = $(this).children('img').attr('src');

    modaldiv = $('.modalExample').html();
    modaldiv = modaldiv.replace("myModal", "myModal_"+id);
    modaldiv = modaldiv.replace("fakimg", imgsrc);
    $('.area').append(modaldiv);

    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
      $('.modal-dialog').css({
        top: 200,
        left: 0
      });
    }

    //$('#myModal').modal({
    $('#myModal_'+id).modal({
      backdrop: false,
      show: true
    });

    $('.modal-dialog').draggable({
      handle: ".modal-body"
    });

   // To make behind elements clickable
   $('.modal-open .modal.in').css( 'pointer-events', 'none' );
   $('.modal-open .modal.in .modal-dialog').css( 'pointer-events', 'all' );

  });

编辑：对不起，这是我的坏事，我以为你使用过bootstrap 4.但它是3.3。所以我再次做了更改，现在尝试上面的代码。

我怎么能拖多模态？

1 个答案: