Question

我正在尝试相对于其按钮或使用jquery单击的按钮定位弹出窗口。我想以一种不掩盖按钮本身的方式定位弹出窗口。将其放置在单击按钮的左侧，右侧，上方或下方。

现在我知道我可以通过编写更多的html弹出窗口和css来做到这一点但是必须有一种方法来动态使用一个div并用jquery定位它。我尝试使用偏移和位置（在某一点上），但我无法让它工作。坦率地说，我是js和jquery的入门级别，请原谅我的高唱。

非常感谢任何帮助!!

JS：

 $('.trends').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>What trends could potentially drive growth in the U.S.?</p>');
     /* if I add this and zero out the positioning via css the pop gets offset but its way far away from this parent.
     var offset = $(this).offset();
                $('.questions').css('left',offset.left);    
                $('.questions').css('top',offset.top);*/

 });

 $('.consumer').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>Even though we have low inflation, consumers are not increasing their spending. Why?</p>');
 });

 $('.industry').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>What factors drove crude oil prices to fall and which industries benefited?</p>');
 });

 $('.henn').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>MESSAGE FROM OUR PRESIDENT</p>');
     var offset = $(this).offset();
 $('.question').html('<p>What trends could potentially drive growth in the U.S.?</p>');

 });
 $('.equity').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>The U.S. stock market has been rising for more than six years. What do you see ahead for equities?</p>');
 });

 $('.balance').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>what does it look like for companies balance sheets?</p>');
 });


 $('.close').click(function (e) {
     e.stopPropagation();
     $(this).parent().hide();
     $('.items').removeClass('no-effect');

 });

jsFiddle

Answer 1

创建一个单独的函数来显示问题，该问题将单击的按钮和问题作为参数：

function showQuestion(button, question) {
  var offset = button.offset();
  $('.question').html(question);

  $('.questions')
    .fadeIn()
    .css({
      left: Math.min(offset.left, $(window).innerWidth()-$('.questions').outerWidth()),
      top: offset.top + button.innerHeight()
    });
}

这样称呼：

$('.trends').click(function () {
  showQuestion(
    $(this), 
    '<p>What trends could potentially drive growth in the U.S.?</p>'
  );
});

Updated Fiddle

css左计算可确保问题始终显示在屏幕上。

Answer 2

您的部分问题是.filter设置为position: relative;。

如果绝对定位元素具有相对定位的父元素，则绝对元素将相对于父元素而不是文档定位。

如果你删除它会更容易使用.offset()来定位问题：

<强> Working Example

 $('.trends').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>What trends could potentially drive growth in the U.S.?</p>');
     /* See change here*/
     var offset = $(this).offset();
     $('.questions').css('top', offset.top + $(this).height());

 });

.filter {
    width: 98.1481481481%;
    float: left;
    margin-left: 0.9259259259%;
    margin-right: 0.9259259259%;
    margin-bottom: 10px;
    /*position: relative; see change here */
}

Answer 3

jQuery中有一个$（...）。position（）函数可以帮助你。我重构了你的代码以避免重复行，但它的要点是：

function popup(jqBtn, question){
  // mind that the .position does not account for borders etc.
  var btn = $(jqBtn).parents('.buttons'),
      posLeft = btn.position().left + btn.outerWidth(),
      posTop = btn.position().top;

  $('.questions').fadeIn();
  $('.question').html(question);
  $('.questions')
    .appendTo(btn.parent())
    .css('left', posLeft + 'px')
    .css('top', posTop + 'px');    
}

// a sample of binding a button to the popup() function
$('.trends').click(function () {
  popup(this, '<p>What trends could potentially drive growth in the U.S.?</p>');
});

因此该函数重新附加'questions'div以使其具有与按钮相同的父级。该按钮基于单击的元素找到，遍历结构以查找“.buttons”类的元素。如果结构变得更复杂，可能需要进行调整。

jsFiddle

JQuery - 相对于按钮定位弹出窗口

3 个答案: