diff --git a/README.md b/README.md index 357cf73c..cba03e1c 100644 --- a/README.md +++ b/README.md @@ -392,6 +392,30 @@ Specifies the CSS selector for the element to be referenced by the ``aria-descri If specified, the first matching element is used. See [Accessibility](#Accessibility) for more information. +##### ``top {Number | String}`` + +This option allows you to control the dialog's distance from the top. Default value is `null` (unspecified) + +If you provide a Number, 'px' will be appended. To use a custom metric, use a String, e.g. `'40%'`. + +For example, the following will add `top: 400px;` to the dialog when opened: + +``` +ngDialog.open({ + template: 'template.html', + top: 400 +}); +``` + +In another example, the following will add `top: 40%;`: + +``` +ngDialog.open({ + template: 'template.html', + top: '40%' +}); +``` + ##### ``width {Number | String}`` This option allows you to control the dialog's width. Default value is `null` (unspecified) diff --git a/js/ngDialog.js b/js/ngDialog.js index ddd287c1..aae782c0 100644 --- a/js/ngDialog.js +++ b/js/ngDialog.js @@ -573,6 +573,15 @@ $dialog.addClass(options.appendClassName); } + if (options.top) { + $dialogContent = $dialog[0].querySelector('.ngdialog-content'); + if (angular.isString(options.top)) { + $dialogContent.style.top = options.top; + } else { + $dialogContent.style.top = options.top + 'px'; + } + } + if (options.width) { $dialogContent = $dialog[0].querySelector('.ngdialog-content'); if (angular.isString(options.width)) {