ngDialog posizionamento e dimensionamento

Question

Sto lavorando su una finestra popup utilizzando ngDialog. Ecco il codice:

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

Template

<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> 

direttiva

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

ho due domande. Come posso centrare il mio popup sullo schermo? Attualmente sto usando margin-top: -100px; È possibile dimensionare automaticamente ngDialog sul suo contenuto?

Grazie

Answer 1

Si può centrare ngdialog impostando stili "di tabella-like":

.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; 
} 

anche una necessità di avvolgere il contenuto del dialogo con ".ngdialog titolare" e blocchi ".il mio-dialogo". E infine posiziona il pulsante ".ngdialog-close" al suo interno.

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

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

    </div> 
</div> 

Ecco esempio dal vivo: ngdialog plunk

Answer 2

Ho scaricato il pacchetto ngDialog con pergolato. quindi i file CSS e JS relativi a ngDilaog sono in bower_components.

Ho aggiunto i seguenti file CSS e JS alla mia pagina 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> 

Nel mio file JS sto aprendo la finestra di dialogo nel modo seguente:

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

Ecco il codice html:

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

Con le modifiche di cui sopra sono in grado di mostra il pop-up al centro dello schermo.

può utilizzare la seguente classe per pop-up.

className: 'ngdialog-theme-plain' 

className: 'ngdialog-theme-default' 

Spero che questo vi aiuterà!