Next.js Discord

Discord Forum

Modal shows up on button but then moves to center when I move my mouse off of it

Answered
Horned oak gall posted this in #help-forum
Open in Discord
Horned oak gallOP
Hi I have this weird modal behavior where it at first pops up on the button click location but when I move my cursor away it correctly shows in the middle of the screen. Any ideas? NextJS using tailwind
<div className="bg-rtBlue w-60 h-10 py-1 text-center rounded-3xl hover:saturate-150">
        {/*<button onClick={() => handleReservationCancel(reservationId)}>Cancel Reservation</button>*/}
        <button onClick={openModal}>Cancel Reservation</button>

        {/* Modal */}
        {isModalOpen && (
            <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
                <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
                    <h2 className="text-lg font-semibold mb-4">Confirm Cancellation</h2>
                    <p className="mb-6">Are you sure you want to cancel this reservation?</p>
                    <div className="flex justify-end space-x-4">
                        <button
                            className="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400"
                            onClick={closeModal}
                        >
                            No
                        </button>
                        <button
                            className="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
                            onClick={confirmCancellation}
                        >
                            Yes, Cancel
                        </button>
                    </div>
                </div>
            </div>
        )}
    </div>
Answered by Horned oak gall
Issue was that the modal was inside the same div as the button
<div>
<button />
<modal />
</div>

Moved the modal outside of the button div and wrapped them both in a new div and it works as expected now.

<div>
<div>
<button />
</div>
<modal />
</div>
View full answer

5 Replies

Horned oak gallOP
Page which calls the component <CancelReservationButton /> that has the modal:
{reservation.reservationStatus != "CANCELED" && (
            <div className="flex flex-col rounded-2xl drop-shadow-card border border-2 border-black">
                <div className="px-4 py-2" key={reservation.reservationId}>
                    <div className="flex flex-row">
                        <div className="pr-2">Status:</div>
                        <div className={`${reservation.reservationStatus == "CONFIRMED" ? 'text-green-600' : ''}`}>{reservation.reservationStatus}</div>
                    </div>
                    <div>Quantity: {reservation.quantity}</div>
                    <div>Listing Title: {reservation.listing.listingTitle}</div>
                    <div>Listing Price: ${reservation.listing.price}</div>
                    <div>Listing Details: {reservation.listing.details}</div>
                    <div>Buyer: {reservation.listing.identity.identityName}</div>
                </div>
                <div>
                    <div className="flex flex-row justify-around pt-4 text-lg font-semibold">
                        <CancelReservationButton reservationId={reservation.reservationId} quantity={reservation.quantity}/>
                        <MessageUserButton userId={reservation.identity.identityId} username={reservation.identity.identityName}/>
                    </div>
                    <div className="p-2 text-lg font-semibold">
                        {reservation.reservationStatus != "CONFIRMED" ? <ConfirmReservationButton reservation={reservation}/> : <div></div>}
                    </div>
                </div>
            </div>
        )}
Incorrect display
Correct display
Horned oak gallOP
Solved this.
Horned oak gallOP
Issue was that the modal was inside the same div as the button
<div>
<button />
<modal />
</div>

Moved the modal outside of the button div and wrapped them both in a new div and it works as expected now.

<div>
<div>
<button />
</div>
<modal />
</div>
Answer