在部分视图上定位弹出窗口 [英] positioning popups on partial views

问题描述

我有一个局部的看法，我想将我的弹出式窗口/通知合并到。我想将这些通知定位在两个按钮周围。但是，我并不确定如何在按钮周围放置这些弹出窗口。在文档示例中，它声明在弹出应该发生的地方的href中使用弹出div的id。

示例：

 < a href =＃popupPadded data-rel =popupdata-role =button>用填充弹出< / a> 
 
< div data-role =popupid =popupPaddedclass =ui-content> 
< p>这是一个弹出式菜单，其中包含< code> ui-content< / code>类添加到弹出式容器中。< / p> 
< / div> 
  

但我的部分视图正在其他地方使用href =＃ 。如何将弹出窗口放置在局部视图中，并在其他页面上重复使用它们？ 下面是我的局部视图的HTML：

 < a href =＃data-icon =GhCsStatus-Reddata-position-to =origin data-inline =truedata-mini =truedata-role =buttonid =GhCsStatus_CSstyle =pointer-events：none;> CS< / a> 
  
< div id =GH_popupdata-role =popup> 
< p>获取历史记录已关闭！ < / p为H. 
< / div> 
 
< div id =CS_popupdata-role =popup> 
< p>通信服务关闭！ < / p为H. 
< / div> 
 
< div id =GHCS_popupdata-role =popup> 
< p>获取历史和通信服务关闭！ < / p为H. 
< / div> 
  

解决方案

更新：

$与 .position（）不同，b $ b

.offset（）会给出期望的结果。

---

首先，您需要使用 .offset（） 或 .position（） 这与您想要打开的弹出窗口有关。

Demo - .offset（） 更新

$ b

演示 - .position（） / blockquote>

  var x_pos = $（＃btn_id）。offset（）。left; 
 var y_pos = $（＃btn_id）。offset（）。top; 
  

然后打开弹出窗口

<$ p $ （'open'，{x：x_pos，y：y_pos}）;} $（'＃popup_id'）。


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

I have a partial view that I would like to incorporate my popup/notifications into. I would like to position these notifications around the two "buttons". However, I'm not actually sure how to position these popups around the buttons. In the documentation examples, it states to use the id of the popup div in the href of where the popup should occur.

example:

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

But my partial view is being used somewhere else with href="#". How can I position my popups in the partial view and also reuse them on other pages?

Here is the HTML for my partial view:

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

解决方案

Update:

.offset() will give the desired results unlike .position().

---

First you need to get the button's position using either .offset() or .position() which is related to the popup you want to open.

Demo - .offset() updated

Demo - .position()

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

And then open the popup

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

Note: You can open only one popup at a time.

这篇关于在部分视图上定位弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！