Модал не показывается с помощью jQuery

Question

У меня есть вызов Ajax, который вызывает некоторые параметры, и они отображаются на сайте.

jQuery append call:

$("#boxWrap2").append("<div class='col-md-4 box' data-toggle='modal' data-target='#TileBox"+object[i].TileOrder+"' id='TileBox"+object[i].TileOrder+"'><div class='titleBox'><h1>" + object[i].Title + "</h1><div style='width:250px; height: 130px;background-color: white; border: 1px solid lightgrey;'><img style='width: auto; height: inherit; padding-left: 10px;' src='" +  object[i].EncodedAbsUrl + "' alt='" + object[i].Title +"'/></div></div></div>");

---

Это установит цель как '# TileBox3'
data-toggle='modal' data-target='#TileBox"+object[i].TileOrder+"'

---

Когда я нажимаю на плитку, она показывает только пустой черный экран без модального всплывающего окна, как показано ниже:

---

Модальный код:

<!-- Modal -->
<div id="TileBox3" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><div id="x">&times;</div></button>
            <h4 class="modal-title">Acuvue</h4>
        </div>
        <div class="modal-body">
            <div class="FT-main-category ms-WPBody">
                <div class="FT-main-header ms-WPBody">
                    <span>Test</span>
                </div>
                <div id="virtual-private-network-vpn">
                    <span>Test</span>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
</div>

Answer 1

ошибка - это идентификатор кнопки, которую вы создаете, и идентификатор модального элемента совпадают. "TileBox3"

<div class='col-md-4 box' 
data-toggle='modal' 
data-target='#TileBox"+object[i].TileOrder+"'  
          id='TileBox"+object[i].TileOrder+"'><---------change this

цель данных должна указывать идентификатор модального элемента (а не кнопки, как в вашем случае)

для получения дополнительной информации см. https://www.w3schools.com/bootstrap/bootstrap_modal.asp