单击 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

这是一个示例，说明如何根据您的情况切换 bootstrap 模式

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

单击 div 不会打开模式

Clicking on div isn't opening modal

html

javascript

jquery

events

modal-dialog

JS 片段：

index.js

HTML: