如何使用彈出視窗引導程式顯示使用者詳細資訊而不使用點擊事件引導程式模式？

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>