ngDialog的定位和大小

Question

我正在使用ngDialog的彈出窗口。下面是一些代碼：

<style> 
    .ngdialog.dialogforpopup .ngdialog-content 
    { 
     width : 1100px; 
     margin-top:-100px; 
     padding-top:10px; 
    } 
</style> 

模板

<div style="height:800px;width:1040px;padding-left:5px;padding-top:5px; 
    padding-right:5px" 

</div> 
<div class="ngdialog-buttons" style="margin-top:10px"> 
      <button type="button" class="ngdialog-button ngdialog-button-primary" 
      ng-click="cancel()">Cancel</button> 
      <button type="button" class="ngdialog-button ngdialog-button-primary" 
      ng-click="save()">Save</button> 
</div> 

指令

ngDialog.open({ 
     template: 'editor.html', 
     controller: 'editorController', 
     className: 'ngdialog-theme-default dialogforpopup', 
     closeByDocument: false, 
     disableAnimation: true 
     }); 

我有兩個問題。 如何在屏幕上居中彈出窗口？目前我正在使用margin-top：-100px; 是否可以自動調整ngDialog的大小？

謝謝

Answer 1

人們可以通過設置「表樣」風格居中ngdialog：

.ngdialog{ 
    padding:0 !important; 
} 

.ngdialog-content { 
    padding: 0 !important; 
    background: transparent !important; 
    display: table; /*table-like styles for vertical centering*/ 
    width: 100% !important; 
    height:100%; 
} 

.ngdialog-holder { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    height:100%; 
} 

.ngdialog-content > .ngdialog-close{ 
    display:none; /*hide original close button*/ 
} 

.my-dialog{ 
    width:400px; 
    background:#fff; 
    border:1px solid #000; 
    margin:0 auto; /*center dialog horizontally*/ 
    position: relative; 
} 

另外一個需要包裝對話框的內容與「.ngdialog持有人」和「我的對話中」塊。最後在其中放置「.dialog-close」按鈕。

<div class="ngdialog-holder"> 
    <div class="my-dialog"> 

     Dialog content goes here 
     <div class="ngdialog-close"></div> 

    </div> 
</div> 

這裏是活生生的例子：ngdialog plunk

Answer 2

我用bower下載了ngDialog包。所以ngDilaog相關的CSS和JS文件在bower_components中。

我將下面的CSS和JS文件添加到我的html頁面。

<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog.css"> 
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-default.css"> 
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-plain.css"> 
<script src="../bower_components/ng-dialog/js/ngDialog.js"></script> 

在我自己的JS文件，我通過以下方式打開該對話框：

ngDialog.open({ template : 'dialog' ,scope : $scope , className: 'ngdialog-theme-default', plain: false, 
        showClose: true, 
        closeByDocument: true, 
        closeByEscape: true, 
        appendTo: false}); 

這裏是html代碼：

<script type="text/ng-template" id='dialog'> 
<div class="ngdialog-message"> 
    Hello!! 
</div> 
</script> 

隨着上述變化，我能在屏幕中心顯示彈出窗口。

可以使用下面的類來彈出。

className: 'ngdialog-theme-plain' 

className: 'ngdialog-theme-default' 

我希望這會有所幫助！