Mixitup Filter with Bootstrap Modals

Question

I'm trying to allow for modals to be opened within the Mixitup filtration.

Whenever I click an image (either before filtering or after, it doesn't matter) the modal opens but then no buttons on the filter are active and no images are shown. Even when closing the modal, this stays the same until you press the 'All' button again.

I'd imagine it's some issue with the different data-filter/toggle/targets between the modal and the filters.

js

var containerEl = document.querySelector('.mixitupContainer');

var mixer = mixitup(containerEl, {
  controls: {
    toggleLogic: 'and'
  },

  animation: {
    effects: 'fade',
    duration: 200,
    nudge: false,
    reverseOut: false
  }
});

css

.mix img {
  margin-bottom: 30px;
}
.mixitup-control-active {
  background: #888;
}

html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://demos.kunkalabs.com/mixitup/mixitup.min.js"></script>
<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h2 class="text-center">Filter Example with Modals</h2>
      </div>
    </div>
    <hr>
  </div>


  <div class="container">
    <div class="col-lg-12">
      <div class="controls text-center">
        <button type="button" class="control btn btn-filter" data-filter="all">All</button>
        <button type="button" class="control btn btn-filter" data-toggle=".green">Green</button>
        <button type="button" class="control btn btn-filter" data-toggle=".yellow">Yellow</button>
        <button type="button" class="control btn btn-filter" data-toggle=".purple">Purple</button>
        <button type="button" class="control btn btn-filter" data-toggle=".pink">Pink</button>
        <button type="button" class="control btn btn-filter" data-toggle=".blue">Blue</button>
        <button type="button" class="control btn btn-filter" data-toggle=".orange">Orange</button>
      </div>
      <hr>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="mixitupContainer">
          <div class="col-lg-4 col-md-6 col-sm-6 mix all">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=G,Y,Pu,Pi,B,O" class="img-responsive center-block">
            </a>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6 mix green pink orange">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=G,Pi,O" class="img-responsive center-block">
            </a>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6 mix green yellow blue">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=G,Y,B" class="img-responsive center-block">
            </a>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6 mix green yellow pink">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=G,Y,Pi" class="img-responsive center-block">
            </a>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6 mix green yellow blue">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=G,Y,B" class="img-responsive center-block">
            </a>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6 mix green yellow pink">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=G,Y,Pi" class="img-responsive center-block">
            </a>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6 mix green purple blue">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=G,Pu,B" class="img-responsive center-block">
            </a>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6 mix purple blue orange">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=Pu,B,O" class="img-responsive center-block">
            </a>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6 mix all">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=G,Y,Pu,Pi,B,O" class="img-responsive center-block">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal 1 -->
  <div class="modal fade gif-1-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <img src="http://placehold.it/500x500" class="img-responsive center-block">
      </div>
    </div>
  </div>
</body>

I've recreated the issue in this jsfiddle.

Basically I want the modal to open and for the filter in the background to remain as it was before I clicked the modal link.

I understand basic JS but I'm not capable of debugging this and/or knowing straight away a workaround. Any help would be very much appreciated! Sorry if it's a really simple question too..

when including a fiddle its a good idea to also paste code here for future proofing — happymacarts, Dec 16 '16 at 18:11
a simplified solution could be to capture the current state of your filtering before opening the modal then add to the `$('#myModal').on('hidden.bs.modal', function (e) { // do something... })` function the actions to restore your captured filters — happymacarts, Dec 16 '16 at 18:19
@happymacarts I understand that in theory, but how would I do that _exactly_? — samtodd, Dec 16 '16 at 18:27
i am not familiar with the mixitup lib but let me work it out. give me a few — happymacarts, Dec 16 '16 at 18:33
@happymacarts perhaps I could use something like [dimsemenov.com/plugins/magnific-popup](http://dimsemenov.com/plugins/magnific-popup/) instead of the bootstrap modal? — samtodd, Dec 16 '16 at 18:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130811/discussion-between-samtodd-and-happymacarts). — samtodd, Dec 16 '16 at 18:58

score 3 · Accepted Answer · answered Dec 16 '16 at 18:52

I added some javascript and have attached a jsfiddle essentialy I am triggering the click event to the all filter when closed.

If you wanted to modify it to restore the current you could capture those to a variable (again I am not familiar with the mixitup lib and available functions)

    $(document).ready(function() {
  var containerEl = document.querySelector('.mixitupContainer');

  var mixer = mixitup(containerEl, {
    controls: {
      toggleLogic: 'and'
    },

    animation: {
      effects: 'fade',
      duration: 200,
      nudge: false,
      reverseOut: false
    }
  });
  $('.gif-1-modal').on('hidden.bs.modal', function(e) {    
    $('#all').click();
  })

});

https://jsfiddle.net/happymacarts/8jjoLhk4/

score 1 · Answer 2 · answered Feb 01 '17 at 13:56

1

Bootstrap uses the attribute data-toggle internally, which interferes with MixItUp.

See issue and solution on Github: https://github.com/patrickkunka/mixitup/issues/268

answered Feb 01 '17 at 13:56

paddle

11
1

Mixitup Filter with Bootstrap Modals

2 Answers2