javascript - JQuery:使弹出窗口出现在正在单击的按钮的正下方

Question

有谁知道一个简单的解决方案，可以让弹出窗口出现在被单击的按钮正下方，无论屏幕尺寸如何？

这是我当前的代码，单击的按钮是变量“help”:

  $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">
	<p><a>Help</a></p>
	<div class="pop">
		<div class="close"><a>X</a></div>
		<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>     
</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>