模式引导程序应该放在哪个文件中，放在哪里

Question

我需要向以下web应用程序添加一个模式弹出窗口：

https://github.com/gunet/openeclass/tree/3.12.x

<div class="modal fade" id="wizardmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Property</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Smart Wizard HTML -->
<div id="smartwizard">
<ul>
<li><a href="#step-1">Step 1<br /><small>Add Property</small></a></li>
<li><a href="#step-2">Step 2<br /><small>Type of Property</small></a></li>
</ul>
<div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>

I'm using modal show.
$(window).on('load',function(){
$('#wizardmodal').modal('show');
});

我应该在哪个文件和哪行添加以上内容？

我已经尝试在index.php中添加以上内容，但没有显示

Answer 1

我可以从您的代码中看到您正在运行引导程序版本4。以下是有关如何使用模态的文档链接https://getbootstrap.com/docs/4.6/components/modal.

我对您的代码添加了一些修改，使其能够运行。请在下面查看。

$(window).on('load',function(){
$('#wizardmodal').modal('show');
});

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<div class="modal fade" id="wizardmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Property</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;<span>
</button>
</div>
<div class="modal-body">
<!-- Smart Wizard HTML -->
<div id="smartwizard">
<ul>
<li><a href="#step-1">Step 1<br /><small>Add Property</small></a></li>
<li><a href="#step-2">Step 2<br /><small>Type of Property</small></a></li>
</ul>
<div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>