feiti feiti - 7 months ago 22
Javascript Question

JQuery: Make pop up window appear right under the button that's being clicked

does anyone know a simple solution for making a pop-up window appear right below the button being clicked, no matter what the screen size?

This is my current code, the button being clicked is variable "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>");

});


This is close, but doesn't go right under the button. I'm wondering if there is a better solution to do this. Any tips much appreciated!

Answer

Something like this could work

// 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>