首先你需要包含jquery，并触发模态，要么用一个按钮-

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

或者使用jquery显示bootstrap模式-

<script type="text/javascript">
$(document).ready(function(){
    $('.modal').modal('show');
});
</script>

您的示例没有包含jQuery。

Uncaught Error: Bootstrap requires jQuery

必须先包含jQuery，然后才能包含Bootstrap。
此外，Bootstrap Modal需要通过页面上的某种控件或JavaScript进行切换：http://getbootstrap.com/javascript/#modals-usage
这意味着您要么需要一个具有适当数据属性的按钮，该按钮将对应于在您的模态上设置的属性，要么通过JavaScript执行
通过JavaScript：
$('.modal').modal('show')
或通过控件上的属性：
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

EDIT：如果这样做，则需要指定target作为模态div的ID

<div id="myModal" class="modal fade">
   <!--modal content here -->
</div><!-- /.modal -->

你需要在Bootstrap之前包含jQuery。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

你应该加载你的jQuery javascript文件，before bootstrap javascript文件！
希望能成功

在我的例子中，当我这样做的时候，bootstrap模型没有显示出来

$('#myModal').show();

但是我把上面的代码修改成下面的代码，然后它就工作了

$('#myModal').modal('show');

我不知道这是否有帮助。我已经尝试了几个小时的这些技巧。最后我添加了bg-dark到modals类，它工作了。
所以我改变了

<div id="myModal" class="modal fade" role="dialog">

进入：

<div id="myModal" class="modal fade bg-dark" role="dialog">

我认为你添加了这个CDN。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

所以，这对我很有效：

请记住检查项目、bootstrap和jquery中的所有依赖项（正确版本）。

<button type="button" class=" btn rounded-3 add-new-client-btn" id="" data-bs-toggle="modal" data-bs-target="#exampleModal"> Your Button Here</button>

将按钮中的id保留为空，并将模态添加到代码的末尾：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                    ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

**注意：**这可能会根据您使用的bootstrap版本而变化，请始终在www.example.com上查看https://getbootstrap.com/docs/5.1/components/modal/#modal-components

我使用的是Bootstrap v5.1.0版本。.modal（）;命令不起作用。它与.modal（'show'）. screenshot一起工作正常