单击div不会打开模式

Question

我有一堆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> 

Answer 1

这里是一个示例，说明如何根据情况切换引导程序模式

<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.');
});