CODEWITHSUNDEEP
jquerybootstrap-modal
AllenBooTung
AllenBooTung

Reputation: 340

How can I drag multi modal?

Click li on grey header can pop multiple modals. I want to drag the modals I want but in this fiddle https://jsfiddle.net/jz2cqvyn/3/ I can only drag the last popped modal. How can I make it?

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

Upvotes: 2

Views: 696

Answers (1)

Galzor
Galzor

Reputation: 845

that was a nice question. i solved it i think. all you need to do is to make the behind modal windows clickable. rest is fine.

try below code. check the 1 line i added in bottom. let me know if this works.

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

  });

EDIT: sorry, that was my bad, i assumed u used bootstrap 4. but it was 3.3. so i made changes again, try above code now.

Upvotes: 3

Related Questions