Question

有没有人知道一个简单的解决方案，无论屏幕大小是什么，弹出窗口都会出现在点击按钮的正下方？

这是我当前的代码，点击的按钮是可变的＆＃34; help＆＃34;：

  $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

工作演示

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

这样的事情可以起作用

＆＃13;

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

＆＃13;

.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;
 }

＆＃13;

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

＆＃13;

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。

JQuery：弹出窗口显示在被点击的按钮下

4 个答案: