带有 Bootstrap 模态的 Mixitup 过滤器答案

【问题标题】：Mixitup Filter with Bootstrap Modals带有 Bootstrap 模态的 Mixitup 过滤器
【发布时间】：2016-12-16 18:09:51
【问题描述】：

我正在尝试允许在 Mixitup 过滤中打开模态。

每当我单击图像时（无论是在过滤之前还是之后，都没有关系），模式都会打开，但是过滤器上的按钮都没有激活，也没有显示图像。即使在关闭模式时，这也会保持不变，直到您再次按下“全部”按钮。

我想这是模式和过滤器之间不同的数据过滤器/切换/目标的一些问题。

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>

我在jsfiddle 中重现了这个问题。

基本上，我希望打开模态，并让后台的过滤器保持在我单击模态链接之前的状态。

我了解基本的 JS，但我无法对此进行调试和/或立即知道解决方法。任何帮助将不胜感激！对不起，如果这也是一个非常简单的问题..

【问题讨论】：

在包含小提琴时，最好在此处粘贴代码以供将来校对
@happymacarts 我已经在代码 sn-p 中添加了 HTML。
一个简化的解决方案可能是在打开模式之前捕获过滤的当前状态，然后将操作添加到 $('#myModal').on('hidden.bs.modal', function (e) { // do something... }) 函数以恢复捕获的过滤器
@happymacarts 理论上我明白这一点，但我将如何确切地做到这一点？
我不熟悉 mixitup 库，但让我来解决。给我几个

标签： javascript html twitter-bootstrap modal-dialog mixitup

【解决方案1】：

我添加了一些 javascript 并附加了一个 jsfiddle 本质上，我在关闭时触发了所有过滤器的点击事件。

如果你想修改它以恢复当前，你可以将它们捕获到一个变量中（同样我不熟悉 mixitup 库和可用函数）

    $(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/

【讨论】：

【解决方案2】：

Bootstrap 在内部使用属性 data-toggle，这会干扰 MixItUp。

在 Github 上查看问题和解决方案： https://github.com/patrickkunka/mixitup/issues/268

【讨论】：