模态框上层弹窗无法显示、定位失效问题技术求助

Let's break down the issues you're facing and fix them one by step:

Key Problems in Your Current Code #

• Syntax Error: Your jQuery selector $("#button1) is missing a closing quote — it should be $("#button1").
• Undefined Position Variables: You're using x and y without fetching them from the click event object; you need to get e.pageX and e.pageY.
• Z-Index Hierarchy: Bootstrap's default modal has a z-index of 1050. Your popup needs a higher z-index to appear above it, and you also need to ensure no parent element of the popup is clipping or restricting its stacking context.
• Positioning Context: If you want the popup to position relative to the modal (instead of the entire document), the modal's content container needs position: relative to act as a positioning anchor.

Corrected Code #

HTML & CSS #

<button id="button1">click</button>
<div class="modal" id="abc">
  <div class="content" style="position: relative;"> <!-- Added relative positioning -->
    <h1>Hi</h1>
    <div id="popupabc" hidden="hidden" style="position: absolute; z-index: 1060; background: white; padding: 10px; border: 1px solid #ccc;">
      <h1>Hello</h1>
    </div>
  </div>
</div>

(Note: I added inline styles for clarity; you can move these to an external CSS file for better maintainability.)

jQuery #

$(function(){
  // Fixed selector syntax and modal trigger
  $("#button1").on('click',function(e){
    $("#abc").modal('show');
  });

  $(document).on('click',function(e){
    // Get valid mouse position from the click event
    const x = e.pageX;
    const y = e.pageY;
    // Apply position and show the popup in one chain
    $("#popupabc").css({left: x, top: y}).show();
  });
});

Additional Tips #

• If you only want the popup to appear when clicking inside the modal, switch the document click listener to target the modal's content area instead (e.g., $(".modal .content").on('click', ...)).
• If your modal has overflow: hidden set, the popup might get clipped. You can either remove that property or move the popup element outside the modal's content container (just keep its z-index higher than the modal's 1050 value).

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