如何使用弹出窗口引导程序显示用户详细信息而不使用单击事件引导程序模式？

Question

我在 razor page asp.net 上工作。我面临的问题是，如果不使用引导模式，就无法使用鼠标或弹出窗口显示用户详细信息

我做什么，如下

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#userDetailsModal">
View User Details
    </button>

用于显示用户详细信息的模态引导程序

<div class="modal fade" id="userDetailsModal" tabindex="-1" role="dialog" aria-labelledby="userDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userDetailsModalLabel">User Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p><strong>User Name:</strong> @TempData["UserName"]</p>
                    <p><strong>User Role:</strong> @TempData["UserRole"]</p>
                    <p><strong>Environment:</strong> @TempData["Environment"]</p>
                    <p><strong>User ID:</strong> @TempData["UserId"]</p>
                    <p><strong>StatusCode:</strong> @TempData["StatusCode"]</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

我使用模型中的临时数据传递用户详细信息以查看数据，并且数据成功传递

我期望做什么的图像：

更新帖子

您可以为附加的示例代码应用弹出框吗

Answer 1

从您的代码中，您正在使用 Boostrap 4 模式来显示数据，但现在 Asp.Net Core 使用 Boostrap 5。 Boostrap 4 和 Boostrap 5 之间的代码有一些不同，您可以将代码更新为：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userDetailsModal">
    View User Details
</button>

<div class="modal fade" id="userDetailsModal" tabindex="-1" role="dialog" aria-labelledby="userDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userDetailsModalLabel">User Details</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p><strong>User Name:</strong> @TempData["UserName"]</p>
                <p><strong>User Role:</strong> @TempData["UserRole"]</p>
                <p><strong>Environment:</strong> @TempData["Environment"]</p>
                <p><strong>User ID:</strong> @TempData["UserId"]</p>
                <p><strong>StatusCode:</strong> @TempData["StatusCode"]</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>