Angular UI Modal CSS

我正在使用Angular UI模式，並希望使其更小。根據引導的網站，使模較小的時候應該使用模式平方米的改性劑類：Angular UI Modal CSS

<div class="modal-dialog modal-sm">

我有麻煩納入這個div到我的角度模式的模板。我發現的每個Angular UI模式示例都只包含模板中的模態頭，模態體和模態腳註div。 Angular已經提供了外部模態，模態對話框和模態內容div嗎？如果是這樣，是否有任何方法來覆蓋它們，以便我可以將「模態-sm」應用於模態對話框div？我試圖在模板中添加完整的模態div結構，並導致模態問題。我也嘗試在我的控制器中設置windowClass =「模態對話框模式-sm」，但這也不起作用。有任何想法嗎？謝謝。

更新：這裏是我的模態模板的內容後，我試圖包括外Bootstrap div的。這是確認用戶想要刪除項目的非常簡單的模式。

<div class="modal"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4>Confirm Delete</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Are you sure you want to delete?</p> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-primary" ng-click="confirm()">Confirm</button> 
       <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
      </div> 
     </div> 
    </div> 
</div>

結果是它沒有正確顯示我的模態。我可以看到背景和我認爲是我的模式的一小部分。

更新：使用@ lmyers的解決方案爲我工作，但沒有指定寬度爲60％，我做了以下使用@ modal-sm Less變量。

.confirm-modal .modal-dialog { 
    width: @modal-sm; 
}

來源

2014-04-01 jsparks

你能告訴你在你的模式是把內容的例子嗎？您是否嘗試通過控制內容的大小來控制模式的大小？ – lmyers

我用我的模態模板的內容更新了問題。正如你所看到的，我的模式中內容很少，所以內容的大小不是問題。我只想使用modal-sm來使我的模式比默認大小更小。 – jsparks

我有一個幾乎相同的模式對話框進行確認刪除，沒有外部div，並適當調整自己的大小。所以我想知道什麼版本的引導？什麼在你的.css？您可能需要在Chrome中查看正在應用於此對話框進行調試的樣式。 – lmyers

好的，我現在明白了。下面是我們在做的CSS：

.appcustom-modal-med > .modal-dialog { 
    width: 60%; 
}

然後控制器： windowClass：「appcustom模態醫科」

來源

2014-04-02 19:11:56 lmyers

謝謝。你的解決方案相當簡單，對我來說很有效，但是我沒有指定寬度，而是使用了@ modal-sm Less變量。這讓我感覺好一點，我不能在我的模板中簡單地使用modal-sm修飾符。我看到modal-sm和modal-lg是Bootstrap 3.1.0的新增功能，所以也許在某些時候，Angular UI將允許我們使用這些修改器來自定義模式的大小。 – jsparks

我更新了我的問題，我如何使用@ modal-sm Less變量。 – jsparks

有趣的是，我搜索了Angular UI問題，發現了一個問題 - （https://github.com/angular-ui/bootstrap/issues/1718）。通過評論閱讀，有一個正在進行的拉動請求，可以將類應用到模態對話框。 – jsparks

Angular UI Modal CSS

回答

相關問題