4

こんにちは、ドロップダウンメニューオプションをクリックすると表示される簡単なポップアップリストがあります。残念ながら、そのポップアップはCSS絶対の下にあり、それがないとポップアップはページの下に入ります。
また、ブラウザごとに異なる位置に表示されます。

 $self.next().bind('click', viewList);

    if (!settings.appendTo) {
      $self.after(createDropdown($self, selectboxCounter));
    } else {
      var offset = $self.parent().offset();

      $(settings.appendTo).append(createDropdown($self, selectboxCounter).css({
        'top': offset.top,
        'left': offset.left,
        'width': 100//'width': $self.parent().width() * 0.8
      }));
    }
  }

  $self.trigger('change');
  selectboxCounter++;
});

// Hide dropdown when click is outside of the input or dropdown
$(document).bind('click', hideDropdown);

$('.sb-custom').find('.sb-select').live('keydown', selectKeypress);
$('.sb-custom').bind('blur', clearKeyStrokes);
$(document).delegate('.sb-dropdown', 'focus', viewList);

return this;
};

親選択の位置、またはメニュー位置にポップアップを配置したい。また、さまざまなブラウザーに調整します。

4

1 に答える 1

1

最近、私が開発を手伝っていたウィジェットでこの問題に遭遇しました。私たちが思いついた解決策は、ポップアップ リストをドキュメントの本文にバインドすることでした。body を親として使用することで、他の要素がポップアップを隠していることを心配する必要はありませんでした。次に、飛び出している場所に基づいて絶対に配置しました。

var offset = $("#popupFromHere").offset();
$("#popup")
    .appendTo("body")
    .css({
        left: offset.left
        top: offset.top + $this.outerHeight(true)
    });
于 2012-07-19T18:00:25.130 に答える