Prevent id conflict

[zack9433]

Open wrong overlay because there is a duplicated id in the page.

[allenhwkim]

Please be more specific, I have no idea on this issue.

[zack9433]

<h3>Open Inside Overlay For A DIV</h3>
<div id="my-div" style="width: 400px; height: 100px; border: 1px solid #ccc; position: relative">
  <button (click)="overlayManager.open('div-loading')">Show Loading For This Div</button>
  <div id="div-loading" ngui-overlay>
    <div style="color:#fff">Loading</div>
    <button (click)="overlayManager.close('div-loading')">Close</button>
  </div>
  My Div<br/>
</div>

<h3>Open Inside Overlay For A DIV</h3>
<div id="my-div" style="width: 400px; height: 100px; border: 1px solid #ccc; position: relative">
  <button (click)="overlayManager.open('div-loading')">Show Loading For This Div</button>
  <div id="div-loading" ngui-overlay>
    <div style="color:#fff">Loading</div>
    <button (click)="overlayManager.close('div-loading')">Close</button>
  </div>
  My Div<br/>
</div>

[allenhwkim]

Can you create a plunker for this?

I think you should use different id for different popup like the following. If you provide a plunker, I can quickly verify my assumption.

<h3>Open Inside Overlay For A DIV</h3>
<div id="my-div-1" style="width: 400px; height: 100px; border: 1px solid #ccc; position: relative">
  <button (click)="overlayManager.open('div-loading')">Show Loading For This Div</button>
  <div id="div-loading" ngui-overlay>
    <div style="color:#fff">Loading</div>
    <button (click)="overlayManager.close('div-loading')">Close</button>
  </div>
  My Div 1<br/>
</div>

<h3>Open Inside Overlay For A DIV</h3>
<div id="my-div-2" style="width: 400px; height: 100px; border: 1px solid #ccc; position: relative">
  <button (click)="overlayManager.open('div-loading-2')">Show Loading For This Div</button>
  <div id="div-loading-2" ngui-overlay>
    <div style="color:#fff">Loading</div>
    <button (click)="overlayManager.close('div-loading')">Close</button>
  </div>
  My Div 2<br/>
</div>