javascript - positioning popups on partial views

Question

ポップアップ/通知を組み込みたい部分的なビューがあります。これらの通知を 2 つの「ボタン」の周りに配置したいと思います。ただし、これらのポップアップをボタンの周りに配置する方法が実際にはわかりません。ドキュメントの例では、ポップアップが発生する場所の 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>