Нажатие на div не открывает модальный - PullRequest
Новая
       16

Нажатие на div не открывает модальный

0 голосов
/ 24 апреля 2019

У меня есть куча div, и нажатие на любое из них должно открыть модал, который я жестко запрограммировал в своем html. План состоит в том, чтобы нажать на определенную категорию, откроется модальное окно, и в нем отображаются подкатегории (учебные курсы), связанные с этой конкретной категорией. Но сейчас я больше всего обеспокоен тем, чтобы фактический модал появлялся при клике. В моей консоли я вижу, что на модал нажимают, но в других местах нет никаких признаков того, что модал появляется (то есть он не кажется очень маленьким или невидимым).

Есть мысли по этому поводу?

JS фрагмент: 

        // irrelevant code
        ]).then(axios.spread((cat, lib, admn) => {
            _categories = cat.data.d.results;
            _library = lib.data.d.results;

            this.loadCategories();
            this.loadCourses();
        })).catch(error => {
            console.log(error);
        });

    loadCategories(){
        let categs = _categories;

        let htmlElems = "";
            for (var i = 0; i < categs.length; i++) {
                htmlElems += "<div class='cat-box cat-num-" + i + "'>" + categs[i].Title + "</div>";
            }

        let container = document.querySelector("div.top-training");
        container.innerHTML = htmlElems;
        console.log(container);

    }

    loadCourses(){ // Training Library

        let crs = _library
            .map(x => {
                return x.Title;
            }).sort();

        this.populateCategory(crs, "div.top-training");
    }

    populateCategory(arrObj, parentTarget){
        arrObj = arrObj.filter((v, p) => arrObj.indexOf(v) == p);

        $.each(arrObj, function(idx, val) {

            let targetDiv = $(parentTarget).hasClass(".cat-box");


            let modalTrigger = $('<div />', {
                'class': 'cat-box',
                'data-category': val,
                'data-target': '#modal-id',
                'data-toggle': 'modal',
                'text': val
            });

            targetDiv.append(modalTrigger);
       // irrelevant code here
        });
    }

index.js 

import AllCoursesComponent from './path/allCourses';

let allComp = new AllCoursesComponent();

$(document).on("click", '.cat-box', function(val) {
    console.log('.cat-box clicked')
    let cat  = $(this).data('category')

    $(".training-titles-ul").empty();
    let titles = allComp.getPayload().filter(x => x.Title === cat);

});

HTML: 

<div class="top-training"></div>

<!----- Modal ----->
    <div class="modal" id="modal-id" role="dialog">
      <div class="modal-dialog" role="document">
       <!-- modal stuff here -->   
      </div> 
    </div>

1 Ответ

1 голос
/ 24 апреля 2019

Вот пример того, как вы можете переключить модальный загрузчик для вашей ситуации 

<div class="top-training" id="traning1" data-toggle="modal" data-target="#modal-id">Here</div>

<!----- Modal ----->
    <div class="modal" id="modal-id" role="dialog">
      <div class="modal-dialog" role="document">
       <!-- modal stuff here -->   
       here
      </div> 
    </div>

Для обработки динамических данных, которые вам нужно передать в этот модальный режим, я бы, вероятно, прикрепил обработчик события ккаждый div, который устанавливает содержимое модала.Пример: 

$('#traning1').on('click',function(){
   $("#someIdForModalContent").text('I am some content.');
});
...