Ajax调用后Modal显示重叠问题求助

Hey there, let's figure out how to fix that modal overlap problem you're dealing with! From your code and the screenshot description, this is usually caused by either leftover loading backdrops from modalmanager, duplicate content in the modal container, or minor HTML structure issues. Let's go through the fixes step by step:

1. Fix the Modal Content HTML Structure #

First, I noticed your modal content HTML is missing a closing </div> tag for the .modal-dialog container. Unclosed tags can mess up rendering and cause layout glitches. Update your modal content to include the final closing tag:

<div class="modal-dialog"> 
    <div class="modal-content"> 
        <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
            <h4 class="modal-title">Modal Title</h4> 
        </div> 
        <div class="modal-body"> 
            Modal body goes here 
        </div> 
        <div class="modal-footer"> 
            <button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button> 
            <button type="button" class="btn green">Save changes</button> 
        </div> 
    </div>
</div> <!-- Add this closing tag for .modal-dialog -->

2. Optimize the JavaScript for Modal Loading #

Your current code uses a 1-second setTimeout, which can lead to the loading backdrop not being cleared properly before the modal opens. Plus, we should clear the modal container each time to avoid duplicate content stacking up. Here's the revised JS:

// Make sure we're targeting the correct modal element
const $currencyEditModal = $('#ajax-currency');

$('.edit-currency').on('click', function(){ 
    const el = $(this); 
    const id = el.data('id'); // Using .data() is more reliable than .attr() for data attributes
    const fullUrl = `${site_url}/currency/edit/${id}`; 

    // Close the modal if it's already open
    if ($currencyEditModal.data('bs.modal')?.isShown) {
        $currencyEditModal.modal('hide');
    }

    // Clear existing content to prevent overlap
    $currencyEditModal.empty();

    // Trigger loading state
    $('body').modalmanager('loading'); 

    // Load modal content without unnecessary delay, and clean up loading state properly
    $currencyEditModal.load(fullUrl, function(response, status) {
        // Always remove the loading backdrop first
        $('body').modalmanager('removeLoading');

        if (status === "success") {
            $currencyEditModal.modal('show');
        } else {
            alert('Oops, failed to load the edit form.');
        }
    });
});

3. Adjust CSS Z-Index (If Needed) #

If the overlap still happens, it might be a z-index stacking issue. Ensure your modal and its backdrop are layered correctly above the modalmanager loading screen. Add this to your CSS:

/* Ensure modal sits above loading backdrop */
.modalmanager .loading-modal {
    z-index: 1030;
}
.modal-backdrop {
    z-index: 1040;
}
.modal {
    z-index: 1050;
}

4. Verify Controller Response #

Double-check that your controller's edit method is returning only the modal content HTML (no extra layout or wrapper elements). If it's including the full page layout, that'll definitely cause rendering issues inside the modal.

These steps should resolve the overlap problem by ensuring clean loading state management, proper HTML structure, and correct stacking order.

内容的提问来源于stack exchange，提问作者kazi