JQuery: Popup-Fenster erscheint direkt unter der Schaltfläche, auf die geklickt wird

Question

kennt jemand eine einfache Lösung, um ein Pop-up-Fenster direkt unter der angeklickten Schaltfläche anzuzeigen, unabhängig von der Bildschirmgröße?

Dies ist mein aktueller Code ist auf der Schaltfläche geklickt wird, 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>"); 

    }); 

Dieses engen, aber direkt unter der Taste geht nicht. Ich frage mich, ob es eine bessere Lösung dafür gibt. Irgendwelche Tipps sehr geschätzt!

Answer 1

So etwas wie dies funktionieren könnte

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

Working Demo

$(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

Anstatt window.open zu verwenden, empfehle ich Ihnen, die klassische jQuery dialog widget zu verwenden. Um ein HTML-Dokument in das Dialogfeld zu laden, können Sie die jQuery get Funktion verwenden, um den Text im Dialog zu ersetzen.

$(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

Nun, ich glaube, Sie ein regelmäßiges Browser-Fenster verwenden wollen. In diesem Fall versuchen Sie dies:

$(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); 
    }); 
}); 

Hier ist die Live-demo.