định vị và định cỡ ngDialog

Question

Tôi đang làm việc trên cửa sổ bật lên bằng ngDialog. Dưới đây là một số mã:

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

Chỉ

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

Tôi có hai câu hỏi. Làm cách nào để căn giữa cửa sổ bật lên của tôi trên màn hình? Hiện tại tôi đang sử dụng margin-top: -100px; Có thể tự động định kích thước ngDialog cho nội dung của nó không?

Cảm ơn

Answer 1

Người ta có thể tập trung ngdialog bằng cách thiết lập phong cách "bảng giống như":

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

Cũng là một nhu cầu để bọc nội dung của hộp thoại với ".ngdialog-giữ" và ".my-thoại" khối. Và cuối cùng đặt nút ".ngdialog-close" bên trong nó.

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

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

    </div> 
</div> 

Dưới đây là ví dụ sống: ngdialog plunk

Answer 2

Tôi đã tải xuống gói ngDialog bằng cách sử dụng bower. do đó các tệp CSS và JS liên quan đến ngDilaog nằm trong bower_components.

Tôi đã thêm các tệp CSS và JS sau vào trang html của mình.

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

Trong file JS của riêng tôi Tôi mở hộp thoại theo cách sau:

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

đây là đoạn code html:

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

Với sự thay đổi ở trên tôi có thể hiển thị cửa sổ bật lên ở giữa màn hình.

có thể sử dụng lớp sau để bật lên.

className: 'ngdialog-theme-plain' 

className: 'ngdialog-theme-default' 

Tôi hy vọng điều này sẽ hữu ích!