Javascript 语义用户界面模式未正确显示

我一直在做一个项目，如果我点击“查看详细信息”按钮，需要一个语义UI模式（弹出窗口）来显示，但每次模式弹出时，它的位置都很奇怪，我对此无能为力（例如无法关闭它）

这是我的.ejs文件及其脚本部分

<% include header.ejs %>
<% include nav.ejs %>
<div class="page-hero" style="background-image: url('004.jpg'); width: 100%;">
<h1 id="eachTitle">MY PROFILE</h1>
</div>
<div class="ui container">
<form method="POST">
    <input type="text" name="search" placeholder="Search..." required class="searchBook">
    <input type="submit" value="Search">
</form>
<% for(var i = 0; i < results.length; i++){ %>
    <div class="ui grid">
        <div class="column four wide">
            <div class="ui card">
                <div class="image">
                    <img src = "<%= results[i].thumbnail %>"/>
                </div>
                <div class="content">
                    <div class="header">
                        <h1 class="ui small header title"><%= results[i].title %></h1>
                    </div>
                    <div class="meta">
                        <p>Author: <%= results[i].authors %></p>
                        <p>Published on: <%= results[i].publishedDate %></p>
                        <p>Pages: <%= results[i].pageCount %></p>
                    </div>
                </div>
                <div class="content extra">
                    <button class="ui button fluid" id="detail">View Detail</button>
                    <button class="ui button fluid" type="button" name="button">Add</button>
                </div>
            </div>
        </div>
    </div>
    <div id="modaldiv" class="ui modal">
        <i class="close icon"></i>
        <div class="header">
            Book info
        </div>
        <div class="content">
            <div class="discription">
                <div class="ui header">Book Description</div>
                <p><%= results[i].description%></p>
            </div>
        </div>
        <div class="actions">
            <div class="ui button">Delete</div>
        </div>
    </div>
<% } %>


</div>
<% include footer.ejs%>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click', '#detail', function(){
    $('.ui.modal').modal('show');
});
})

</script>

我的个人资料
"/>
作者：

出版日期：

页码：

查看详细信息
添加
图书信息
书名

删除
$（文档）.ready（函数（）{
$（文档）。在（'click'，'#detail'，函数（）上{
$（'.ui.modal'）.modal（'show'）；
});
})

所有内容都已定义，控制台不显示任何错误

（另外，如果我呈现多本书并尝试单击“查看详细信息”按钮，页面将变为黑色，但我认为这是一个循环错误）

---

有人知道为什么会发生这种情况，以及我如何解决它吗？

我认为问题来自这个循环：

对于（var i=0；i 你用相同的ID和类名初始化多个模态，所以当你试图打开它时，我认为他想打开所有模态，这不好

$（'.ui.modal'）.modal（'show'）

尝试查看您的控制台以验证它。 否则，为您创建的每个模式创建不同的类名或id名，我认为它将得到修复

---

和平

没问题，如果您需要更多关于模态的信息，请询问；）