Question

我有一个部分视图，我想将我的弹出/通知合并到。我想将这些通知放在两个“按钮”周围。但是，我实际上并不确定如何在按钮周围放置这些弹出窗口。在文档示例中，它声明在弹出窗口应该出现的位置的href中使用弹出div的id。

示例：

<a href="#popupPadded" data-rel="popup" data-role="button">Popup with padding</a>

<div data-role="popup" id="popupPadded" class="ui-content">
  <p>This is a popup with the <code>ui-content</code> class added to the popup container.</p>
</div>

但我的部分视图正在其他地方使用href =“＃”。如何在部分视图中定位弹出窗口并在其他页面上重复使用它们？

以下是我的部分视图的HTML：

<a href="#" data-icon="GhCsStatus-Red"  data-position-to="origin"    data-inline="true" data-mini="true" data-role="button" id="GhCsStatus_CS" style="pointer-events: none;">CS</a>    
<a href="#" data-icon="GhCsStatus-Red"  data-position-to="origin"    data-inline="true" data-mini="true" data-role="button" id="GhCsStatus_GH" style="pointer-events: none;">GH</a>

<div id="GH_popup" data-role="popup">
<p> Get History is OFF! </p>
</div>

<div id="CS_popup" data-role="popup">
<p> Communication Service is OFF! </p>
</div>      

<div id="GHCS_popup" data-role="popup">
<p> Get History and Communication Service are OFF! </p>
</div>

Answer 1

更新

与.offset()不同，

.position()会提供所需的结果。

首先，您需要使用.offset()或 ~~.position()~~ 来获取按钮的位置，这与您要打开的弹出窗口相关。

Demo - .offset() 已更新

~~演示 - .position（）~~

var x_pos = $("#btn_id").offset().left;
var y_pos = $("#btn_id").offset().top;

然后打开弹出窗口

$('#popup_id').popup('open', { x: x_pos, y: y_pos });

注意：您一次只能打开一个弹出窗口。

在部分视图上定位弹出窗口

1 个答案:

更新