Mixitup Filter with Bootstrap Modals

Я пытаюсь разрешить открытие модалов в рамках фильтрации Mixitup.Mixitup Filter with Bootstrap Modals

Всякий раз, когда я нажимаю изображение (либо перед фильтрованием, либо после него, это не имеет значения) модальный открывается, но затем никакие кнопки на фильтре не активны и изображения не отображаются. Даже при закрытии модальности это остается неизменным до тех пор, пока вы снова не нажмете кнопку «Все».

Я бы предположил, что это проблема с различными фильтрами данных/переключением/мишенями между модальными и фильтрами.

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, но я не могу отладить это и/или сразу узнать об обходном пути. Любая помощь будет очень высоко ценится! Извините, если это тоже очень простой вопрос.

источник

2016-12-16 samtodd

при включении скрипку его хорошая идея также вставить код здесь для будущего расстойки – happymacarts

@happymacarts Я добавил HTML в фрагменте кода. – samtodd

упрощенным решением может быть захват текущего состояния вашей фильтрации перед открытием модального файла, а затем добавление к '$ ('# myModal'). On ('hidden.bs.modal', function (e) { // do что-то ... }) 'функция действий по восстановлению захваченных фильтров – happymacarts

Я добавил несколько javascript и приложил jsfiddle essentialy Я запускаю событие click ко всем фильтрам при закрытии.

Если вы хотите изменить его, чтобы восстановить ток вы могли бы захватить те переменной (опять-таки я не знаком с mixitup Lib и доступных функций)

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

источник

2016-12-16 18:52:03 happymacarts