Bagaimana untuk memaparkan butiran pengguna menggunakan bootstrap pop timbul tanpa menggunakan corak bootstrap acara klik?

Question

Saya sedang mengusahakan halaman cukur asp.net. Masalah yang saya hadapi ialah saya tidak boleh memaparkan butiran pengguna menggunakan tetikus atau pop timbul tanpa menggunakan mod but

Apa yang saya lakukan adalah seperti berikut

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

Modal Bootstrap untuk memaparkan butiran pengguna

<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>

Saya lulus butiran pengguna menggunakan data sementara dalam model untuk melihat data dan data telah berjaya diluluskan

Imej perkara yang saya jangkakan:

Kemas kini siaran

Bolehkah anda memohon popover untuk kod sampel yang dilampirkan

Answer 1

Daripada kod anda, anda menggunakan Boostrap 4 模式来显示数据，但现在 Asp.Net Core 使用 Boostrap 5。 Boostrap 4 和 Boostrap 5 Terdapat beberapa perbezaan antara kod, anda boleh mengemas kini kod anda kepada:

<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>