2017-08-03 46 views
0

我下面的代碼示例按照此鏈接:以引導模式窗口模板角UI添加關閉按鈕

http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/modal

的plunker樣品在這裏:

http://plnkr.co/edit/JMV4Hu2x9l9DA9gaGYaF?p=preview

我試着定義一個自定義模板customModal.html使用windowTemplateUrl向模式框添加一個關閉按鈕(右上角),但模式對話框不會正確顯示,我只能看到深色背景和模態是黯淡的。另外,這些按鈕沒有響應。

欣賞是否有人可以幫助我定義這樣的自定義模板,以允許對所有類似的模式對話框使用關閉按鈕。


更新:我想解釋一下爲什麼這不是this question as suggested可能重複。另一個問題是處理「爲什麼當我們僅在指定模板時打開對話框時出現錯誤」。在這個問題中,即使我遵循指令來實現它,模板也沒有顯示正確。

塔裏克

+0

[角UI引導模式 - 使用自定義模式窗口]的可能的複製(https://stackoverflow.com/questions/24696224/angular-ui -bootstrap-modal-use-custom-modal-window) – Brian

+1

檢查[this plunker](http://plnkr.co/edit/k0JqL6LjZYpBwLxtp9ld?p=preview)out。這是你想要的? – Nishant123

+0

非常感謝..看起來好多了,但關閉按鈕不工作!你也可以解釋你是如何弄清楚如何修復模板的?這在文檔中沒有提及! – tarekahf

回答

1

在腳本中添加模板

<div class="modal-header"> 
<button type="button" class="close" data-dismiss="dialog" data-ng- 
click="cancel($event)"> 
    <span aria-hidden="true">&times;</span> 
    <span class="sr-only">Close</span> 
</button> 
<h4>Title</h4> 
</div> 
+0

這是我現在使用的解決方案,但我需要了解爲什麼模板解決方案無法正常工作? – tarekahf

+0

也許是它的ui-bootstrap庫的一個bug,問題是它的函數在windowTemplate中關閉,它不會觸發。 –