ngDialog 定位和大小调整
ngDialog positioning and sizing
我正在使用 ngDialog 开发弹出窗口 window。这是一些代码:
<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 的大小?
谢谢
我使用 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>
通过以上更改,我可以在屏幕中央显示弹出窗口。
可以使用以下class弹出。
className: 'ngdialog-theme-plain'
className: 'ngdialog-theme-default'
希望对您有所帮助!
可以通过设置 "table-like" 样式使 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
我正在使用 ngDialog 开发弹出窗口 window。这是一些代码:
<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 的大小?
谢谢
我使用 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>
通过以上更改,我可以在屏幕中央显示弹出窗口。
可以使用以下class弹出。
className: 'ngdialog-theme-plain'
className: 'ngdialog-theme-default'
希望对您有所帮助!
可以通过设置 "table-like" 样式使 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