5

私は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
      });

2 つの質問があります。ポップアップを画面の中央に配置するにはどうすればよいですか? 現在、margin-top:-100px; を使用しています。コンテンツに合わせて ngDialog のサイズを自動的に変更することは可能ですか?

ありがとう

4

2 に答える 2

2

「テーブルのような」スタイルを設定することで、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-holder」および「.my-dialog」ブロックでラップする必要があります。そして最後に「.ngdialog-close」ボタンをその中に配置します。

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

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

    </div>
</div>

これが実際の例です: ngdialog plunk

于 2016-11-04T11:20:20.310 に答える