JQuery：让弹出窗口出现在被点击的按钮下方

Question

没有人知道一个简单的解决方案，让一个弹出窗口出现在被点击的按钮的正下方，不管屏幕大小是多少？

这是我当前的代码，被点击的按钮是可变的“帮助”：

$help = $('.help'); 

    var position = $help.position(); 

    $help.click(function() { 
     var x =position.left; 
     var y = position.top; 
     var helpWindow = window.open("", "", "width=200, height=100, left=" + x + ",top=" + y); 
     helpWindow.document.write("<p>Info text</p>"); 

    }); 

这是接近，但不走右侧下按钮。我想知道是否有更好的解决方案来做到这一点。任何提示非常感谢！

Answer 1

像这样的东西可以工作

// help popout 
 
$('.help, .popOut .close a').click(function() { 
 
    $('.pop').toggleClass('popOut'); 
 
});

.help { 
 
    float: left; 
 
} 
 

 
.help a { 
 
    padding: 10px 20px; 
 
    color: #F0F0F0; 
 
    background-color: #3377DD; 
 
} 
 

 
.help a:hover { 
 
    cursor: pointer; 
 
} 
 

 
.pop { 
 
    display: none; 
 
} 
 

 
.popOut { 
 
    float: left; 
 
    width: 250px; 
 
    margin-top: 5px; 
 
    padding: 5px; 
 
    background-color: #F9F9F9; 
 
    border: 1px solid #DDD; 
 
    display: block; 
 
    position: absolute; 
 
} 
 

 
.popOut p { 
 
    color: #242424; 
 
} 
 

 
.close a { 
 
    float: right; 
 
    padding: 3px 5px 2px 5px; 
 
    font-size: 10px; 
 
    color: #F0F0F0; 
 
    background-color: #A10000; 
 
    border-radius: 50%; 
 
    border: 1px solid #BBB; 
 
} 
 

 
.content { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="help"> 
 
\t <p><a>Help</a></p> 
 
\t <div class="pop"> 
 
\t \t <div class="close"><a>X</a></div> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
\t </div>  
 
</div> 
 
<div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div>

Answer 2

工作演示

$(document).ready(function(){ 
 
$('.help').click(function(event) { 
 
    $("#modal").css({display:"block",position:"absolute", top:event.pageY, left: event.pageX}); 
 
}); });

#modal{ 
 
    width:100px; 
 
    height:100px; 
 
    border:1px solid red; 
 
    display:none; 
 
} 
 

 
.help{ 
 
    width:500px; 
 
    height:500px; 
 
    border:1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="modal" >Helper window</div> 
 
<div class="help" > Click inside the div !!!!</div>

Answer 3

而不是使用window.open我建议你使用经典的jQuery dialog widget。 为了在对话框中加载一些html文档，您可以使用jQuery get函数替换对话框中的文本。

$(function() { 
     $('#dialog').dialog({ 
      autoOpen: false 
     }); 

     $(':button.ui-dialog-titlebar-close').on('click', function(e) { 
      e.stopImmediatePropagation(); 
      $('#dialog').dialog('close'); 
     }); 

     $('#myBtn').on('click', function(e){ 
      if ($('#dialog').is(':visible') == false) { 
       $.get('??? YOUR LOCAL URL ???', function(data) { 
        $('#dialogContent').empty().append(data); 
        var myPos = 'left+' + (e.pageX+10) + ' top+' + (e.pageY+10); 
        $('#dialog').dialog('option', 'position', {my: 'left top', at: myPos, of: window}).dialog('open'); 
       }); 
      } 
     }); 
    }); 

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 


<div id="dialog" title="Basic dialog"> 
    <div id="dialogContent"></div> 
</div> 

<button id="myBtn">Click Me</button> 

Answer 4

嗯，我想你想使用普通浏览器窗口。在这种情况下，试试这个：

$(function(){ 
    $('#example').on('click', function(){ 
    var $w = $(window); 
    var $example = $('#example'); 

    var clientWidth = $w.width(); 
    var windowChromeWidth = window.outerWidth - clientWidth; 
    var windowScrollLeft = $w.scrollLeft(); 
    var elementLeftPositionInViewport = $example.scrollLeft() - windowScrollLeft; 
    var screenX = window.screenX; 
    var newWindowX = screenX + windowChromeWidth + elementLeftPositionInViewport; 

    var clientHeight = $w.height(); 
    var windowChromeHeight = window.outerHeight - clientHeight; 
    var windowScrollTop = $w.scrollTop(); 
    var elementTopPositionInViewport = $example.scrollTop() - windowScrollTop; 
    var screenY = window.screenY; 
    var elementHeight = $example.height(); 
    var newWindowY = screenY + windowChromeHeight + elementTopPositionInViewport + elementHeight; 

    var helpWindow = window.open("", "", "width=200, height=100, left=" + newWindowX + ",top=" + newWindowY); 
    }); 
}); 

这里是生活demo。