如何在AngularJS的頁面上將模板放置在我的頁面上？

我有HTML/AngularJS代碼，顯示我的頁面上的主要內容窗口或模態。如何在AngularJS的頁面上將模板放置在我的頁面上？

<div id="header"> 
     . 
</div> 
<div id="main"> 
    <div id="content" ng-show ..> 
     ... 
    </div> 
    <div id="modal" ng-show ..> 
     . 
    </div> 
</div>

我的代碼是適當地設置ng顯示何時查看內容或模態區域。

這工作的很好，但我有問題，頭仍然可以觸摸，而用戶在模態屏幕上。有沒有辦法讓我可以放一個面具或什麼東西來阻止頭部區域在模態被查看時被觸摸。

來源

2015-03-25 Alan2

你能不能設置在行動與它的jsfiddle？ – 2015-03-25 11:50:47

你可以使用http://angular-ui.github.io/bootstrap/#/modal獲得更好的模態控制 – 2015-03-25 11:51:08

@HiteshSiddhapura他顯然不使用bootstrap，否則我肯定bootstrap模態會被使用，而不是自定義一。 – 2015-03-25 11:51:54

我不確定你是如何準確設置的。

您可以覆蓋添加到整個屏幕：

<div class="modal" ng-show="activeModal"> 
    <div class="modal-content"> 
    ... 
    </div> 
</div>

modal-content是主要模式。包裝父母是覆蓋。

這時只要你的模式具有較高的z-index比頭，它就會重疊頭：

.header { 
    position:fixed; 
    top:0;  
    left:0; 
    width:100%; 
    background:darkred; 
} 

.modal { 
    position:absolute; 
    z-index:9; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    background:rgba(0, 0, 0, 0.53); 
    width:100%; 
    height:100%; 
}

如果你想在模式只覆蓋屏幕的一部分，並沒有一個完整的屏幕覆蓋，你可以做同樣的事情，但改變覆蓋沒有背景（所以它仍然會覆蓋屏幕，但'視覺'，而不是，因此，禁用頭可以點擊）。對於modal-content，您還需要更高的z-index。

Demo with full screen overlay and modal

Demo with full screen overlay and small modal

來源

2015-03-25 12:12:58

如何在AngularJS的頁面上將模板放置在我的頁面上？

回答

相關問題