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

我使用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'

我希望这会有所帮助！

Answer 2

可以通过设置＆＃34; table-like＆＃34;来中心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;
}

还需要用＆＃34; .ngdialog-holder＆＃34;来包装对话框的内容。和＆＃34; .my-dialog＆＃34;块。最后放置＆＃34; .ngdialog-close＆＃34;里面的按钮。

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

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

    </div>
</div>

以下是实例：ngdialog plunk

ngDialog定位和尺寸

2 个答案: