Javascript 带引导模式的Mixitup过滤器
我试图允许模态在Mixitup过滤中打开 每当我点击一个图像（无论是在过滤之前还是之后，这都无关紧要），模式就会打开，但是过滤器上的按钮都不会激活，也不会显示任何图像。即使在关闭模式时，这仍然保持不变，直到再次按下“全部”按钮 我可以想象，在模态和过滤器之间使用不同的数据过滤器/切换/目标会出现一些问题 jsJavascript 带引导模式的Mixitup过滤器,javascript,html,twitter-bootstrap,modal-dialog,mixitup,Javascript,Html,Twitter Bootstrap,Modal Dialog,Mixitup,我试图允许模态在Mixitup过滤中打开 每当我点击一个图像（无论是在过滤之前还是之后，这都无关紧要），模式就会打开，但是过滤器上的按钮都不会激活，也不会显示任何图像。即使在关闭模式时，这仍然保持不变，直到再次按下“全部”按钮 我可以想象，在模态和过滤器之间使用不同的数据过滤器/切换/目标会出现一些问题 js var containerEl = document.querySelector('.mixitupContainer'); var mixer = mixitup(containerE
var containerEl = document.querySelector('.mixitupContainer');
var mixer = mixitup(containerEl, {
controls: {
toggleLogic: 'and'
},
animation: {
effects: 'fade',
duration: 200,
nudge: false,
reverseOut: false
}
});
.mix img {
margin-bottom: 30px;
}
.mixitup-control-active {
background: #888;
}
var containerEl = document.querySelector('.mixitupContainer');
var mixer = mixitup(containerEl, {
controls: {
toggleLogic: 'and'
},
animation: {
effects: 'fade',
duration: 200,
nudge: false,
reverseOut: false
}
});
.mix img {
margin-bottom: 30px;
}
.mixitup-control-active {
background: #888;
}
<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>
带Modals的过滤器示例
全部的
绿色
黄色的
紫色
粉红色
蓝色
橙色
基本上，我希望模态打开，背景中的过滤器保持在单击模态链接之前的状态
我理解基本JS，但我无法调试它和/或直接知道解决方法。任何帮助都将不胜感激！如果这也是一个非常简单的问题，很抱歉。我添加了一些javascript，并附加了一个JSFIDLE
基本上，我是在关闭时触发所有过滤器的单击事件
如果您想修改它来恢复当前的状态，您可以将它们捕获到一个变量中（同样，我不熟悉mixitup库和可用函数）
引导在内部使用属性数据切换，这会干扰MixItUp
请参阅Github上的问题和解决方案：
当包含小提琴时，最好在此处粘贴代码，以备将来使用proofing@happymacarts我在代码片段中添加了HTML。一个简化的解决方案可能是在打开模式之前捕获筛选的当前状态，然后添加到$（'#myModal'）。on（'hidden.bs.modal'，function（e）{//do something…}）
执行操作以恢复捕获的filters@happymacarts我在理论上理解这一点，但我该怎么做呢？我不熟悉mixitup库，但让我来解决它。给我一些