如何实现带参数传递的加载弹窗：点击图片跳转时弹窗加载并传参

Got it, let's fix this step by step. Your current issues are the loading indicator sitting in the parent page, unexpected page reset, and passing the onclick parameter to the next page properly. Here's how to resolve this:

First, your empty <a href=""> triggers a default page reload—that's why your parent page resets! We'll block this default behavior and use a clean, unified approach to handle clicks and parameters.

We'll create a fixed-position modal overlay to host your loading spinner, so it's a proper popup instead of being attached to the link. Add this HTML somewhere before your closing </body> tag:

<!-- Loading Modal -->
<div id="loadingModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center;">
  <img src="Images/loading-logo.gif" alt="Loading..." style="background:white; padding:20px; border-radius:8px;">
</div>

Replace your inline onclick and existing jQuery code with this setup. It will show the loading modal first, then call your fCW.fS(val) function with the correct parameter:

Updated HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Loading Modal -->
<div id="loadingModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center;">
  <img src="Images/loading-logo.gif" alt="Loading..." style="background:white; padding:20px; border-radius:8px;">
</div>

<!-- Primary lookup link (param = 1) -->
<a href="javascript:void(0)" class="rcLookupLink" data-param="1">
  <img id="RCLookup" name="RCLookup" alt="" src="images/search_icon_resize.png" />
</a>

<!-- Add more links for other parameters (e.g., param = 2) -->
<a href="javascript:void(0)" class="rcLookupLink" data-param="2">
  <img alt="" src="images/another_search_icon.png" />
</a>

Updated JavaScript #

$(document).ready(function() {
  // Handle clicks on all lookup links
  $('.rcLookupLink').click(function() {
    // Fetch the parameter from the link's data attribute
    const targetParam = $(this).data('param');
    
    // Show the loading modal
    $('#loadingModal').css('display', 'flex');
    
    // Call your function with the correct parameter
    fCW.fS(targetParam);
    
    // The modal will stay visible until the new page loads (perfect for your use case)
  });
});

• No More Page Reset: href="javascript:void(0)" stops the default <a> tag reload behavior.
• Proper Loading Popup: The fixed modal overlay ensures the spinner is centered over the entire page, not stuck to the link.
• Clean Parameter Handling: Storing parameters in data-param attributes makes it easy to manage 1-3 different values without messy inline code.
• Scalable Handler: One jQuery function works for all your links, keeping your code organized.

If you still see console errors, double-check that fCW is properly defined and accessible in your code scope when the click event fires. This setup ensures the parameter is passed correctly to your navigation function.

内容的提问来源于stack exchange，提问作者Samantha Iren Martin