Question

我有一个Ajax呼叫，它会调用某些设置，并将它们显示在网站上。

jQuery追加调用：

$("#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

错误是您创建的按钮的ID和模态的ID相同“ TileBox3”

Stopped due to shared library event (no libraries added or removed)

数据目标应指向模式ID（而不是您所用的按钮）

有关更多信息，请参见https://www.w3schools.com/bootstrap/bootstrap_modal.asp

模态不显示使用jQuery

1 个答案: