From fc6cbefbfee86ac09d15c1d1b81817b3edcffbdf Mon Sep 17 00:00:00 2001 From: Catouse Date: Mon, 22 Jun 2020 20:06:42 +0800 Subject: [PATCH] * fix issue #169, improve scrollInside option of modal and modaltrigger. --- CHANGES.md | 3 +- docs/part/javascript-modal.md | 50 +++++++++++++++++++++++++++- docs/part/javascript-modaltrigger.md | 38 ++++++++++++++++++--- docs/partial/iframe-long-modal.html | 24 +++++++++++++ docs/partial/remote-long-modal.html | 24 +++++++++++++ en/docs/part/javascript-modal.md | 6 ++++ src/js/modal.js | 26 +++++++++++++-- src/js/modal.trigger.js | 2 +- src/less/modules/modals.less | 3 ++ 9 files changed, 164 insertions(+), 12 deletions(-) create mode 100644 docs/partial/iframe-long-modal.html create mode 100644 docs/partial/remote-long-modal.html diff --git a/CHANGES.md b/CHANGES.md index 768c6a23..97b1dde4 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -47,11 +47,10 @@ ZUI 官方网站为 https://www.openzui.com/ ，并提供了[英文文档(https: * 优化了菜单项对象上的 `html` 属性，如果指定 HTML 文本则会作为构建整个菜单项使用，而不仅仅是作为菜单项文本内容，这样方便用户构建任意交互形式的菜单项； * 对话框和对话框触发器： * 增加全局辅助方法 `$.zui.reloadModal(urlOrOptions, modalID)` 来方便用户重新载入指定远程对话框上的内容，当对话框内容重新载入时会显示加载中提示动画； + * 优化了 `scrollInside` 选项，现在同时支持对话框和对话框触发器，解决了在一些特殊情况下没有按预期工作的问题，并针对浏览器窗口发生变化情况进行了优化； * 修复了一些特殊情况下动态更新远程对话框内容后对话框上仍然可能保留更新前部分内容的问题； * 修复了调用 `$.fn.show()` 方法时没有使用全局选项 `$.zui.ModalTrigger.DEFAULTS` 的问题； - * 修复了 `scrollInside` 选项在一些特殊情况下没有按预期工作的问题，并针对浏览器窗口发生变化情况进行了优化； * 修复了加载 iframe 内容失败时并监听 `broken` 事件时没有返回有效的 HTML 字符串可能导致出错的问题； - * 修复了开启 `scrollInside` 选项时 `modal-scroll-inside` 辅助类名错误（[issue #168](https://github.com/easysoft/zui/issues/168)）； * 树形菜单： * 初始化选项 `initialState` 增加新的选项值 `'active'`，在初始化之后展开所有激活的节点以及对应的父节点（确保激活的节点可见） * 新增 `$.fn.expandSelect(selector)` 方法，用户展开指定的节点以及父节点； diff --git a/docs/part/javascript-modal.md b/docs/part/javascript-modal.md index a3a5fd16..3f9cff8a 100644 --- a/docs/part/javascript-modal.md +++ b/docs/part/javascript-modal.md @@ -172,10 +172,23 @@ filter: dhk mtk duihuakuang motaikuang ```html
-... + ...
``` +## 内部滚动 + +通常对话框显示时，如果内容较多允许用户滚动页面来查看其他部分，但可以使用 `scrollInside` 选项来限制对话框仅在 `.modal-body` 内部滚动，对话框的总体高度不会超过浏览器窗口高度。 + +
+ +
+ +```html + + +``` + ## 关闭对话框 在静态对话框HTML中增加一个按钮并添加data属性`data-dismiss="modal"`，这样当点击该按钮时会关闭此对话框。你可以将该属性添加至对话框内的任何元素。 @@ -291,6 +304,12 @@ $('#myModal').modal(options) * 页面内值唯一的字符串，使用本地存储记住位置； 启用该选项需要同时启用 `moveable` 选项，当该值为一个在页面范围内值唯一的字符串时，通过浏览器本地存储来存储数据，关闭页面或浏览器之后也不会忘记。 + + `scrollInside` + 是否在对话框内部显示滚动条 + 默认为 `false`，即在对话框所属的页面上显示滚动条 + + @@ -498,6 +517,35 @@ $('#myModal').on('shown.zui.modal', function() { +
+
+
+
+ +

内部滚动演示

+
+
+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+
+
+ + +
+
+
+
+ diff --git a/docs/part/javascript-modaltrigger.md b/docs/part/javascript-modaltrigger.md index 4eeb4bb3..91193e14 100644 --- a/docs/part/javascript-modaltrigger.md +++ b/docs/part/javascript-modaltrigger.md @@ -58,8 +58,8 @@ filter: duihuakuangchufaqi dhkcfq motaikuang mtk 最简单的方法是为custom指定内容文本即可。同样可以使用`data-custom`属性。
- -
+ + ```html @@ -230,6 +230,30 @@ $('#triggerButton').modalTrigger({icon: 'heart'}); ``` +## 内部滚动 + +通常对话框显示时，如果内容较多允许用户滚动页面来查看其他部分，但可以使用 `scrollInside` 选项来限制对话框仅在 `.modal-body` 内部滚动，对话框的总体高度不会超过浏览器窗口高度。 + +
+ + + +
+ +```html + + + +``` + ## 如何使用 ### 使用data属性来调用 @@ -427,9 +451,13 @@ myModalTrigger.show(); `loadingIcon` 加载时显示的动画所使用的图标 - * 以`icon-*`形式定义的图标名称 -* 自定义加载动画所使用的html - `icon-*`定义的图标名称请参考[图标](#search/icon:spin)。 + + + + `icon-` 定义的图标名称请参考[图标](#search/icon:spin)。 `scrollInside` diff --git a/docs/partial/iframe-long-modal.html b/docs/partial/iframe-long-modal.html new file mode 100644 index 00000000..c738d9f2 --- /dev/null +++ b/docs/partial/iframe-long-modal.html @@ -0,0 +1,24 @@ + + + + + + + + +
+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+
+ + diff --git a/docs/partial/remote-long-modal.html b/docs/partial/remote-long-modal.html new file mode 100644 index 00000000..f341f9b7 --- /dev/null +++ b/docs/partial/remote-long-modal.html @@ -0,0 +1,24 @@ +
+
+ +

内部滚动演示（ajax）

+
+
+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+

虞美人·春花秋月何时了

五代·李煜

+


春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流


+
+
+ + +
+
diff --git a/en/docs/part/javascript-modal.md b/en/docs/part/javascript-modal.md index 31dd2a21..146c54d5 100644 --- a/en/docs/part/javascript-modal.md +++ b/en/docs/part/javascript-modal.md @@ -291,6 +291,12 @@ The available parameters are： * The only string of values on the page and is saved to local storage; Enable `moveable` to enable this option. When the value is the only string within the page range save data through browser local storage, so the data will not be removed after the page or browser is closed. + + `scrollInside` + Whether a scroll bar in a dialog is displayed + The default is `false`, which means the scroll bar is displayed on the page the dialog belongs to. + + diff --git a/src/js/modal.js b/src/js/modal.js index a4abde1e..d1b3928a 100644 --- a/src/js/modal.js +++ b/src/js/modal.js @@ -46,6 +46,14 @@ that.$element.trigger('loaded.' + zuiname) }) } + + if (options.scrollInside) { + $(window).on('resize.' + zuiname, function() { + if (that.isShown) { + that.adjustPosition(); + } + }); + } } Modal.VERSION = '3.2.0' @@ -90,12 +98,24 @@ var $body = $dialog.find('.modal-body').css(bodyCss); if (options.scrollInside && $body.length) { var headerHeight = options.headerHeight; - if (typeof headerHeight !== 'number') { - headerHeight = $dialog.find('.modal-header').height(); + var footerHeight = options.footerHeight; + var $header = $dialog.find('.modal-header'); + var $footer = $dialog.find('.modal-footer'); + if (typeof headerHeight !== 'number' && $header.length) { + headerHeight = $header.outerHeight(); } else if ($.isFunction(headerHeight)) { headerHeight = headerHeight($header); + } else { + headerHeight = 0; + } + if (typeof footerHeight !== 'number' && $footer.length) { + footerHeight = $footer.outerHeight(); + } else if ($.isFunction(footerHeight)) { + footerHeight = footerHeight($footer); + } else { + footerHeight = 0; } - bodyCss.maxHeight = winHeight - headerHeight; + bodyCss.maxHeight = winHeight - headerHeight - footerHeight; bodyCss.overflow = $body[0].scrollHeight > bodyCss.maxHeight ? 'auto' : 'visible'; $body.css(bodyCss); } diff --git a/src/js/modal.trigger.js b/src/js/modal.trigger.js index 5e7f4ee2..9a7742aa 100644 --- a/src/js/modal.trigger.js +++ b/src/js/modal.trigger.js @@ -255,7 +255,7 @@ if (scrollInside) { var headerHeight = options.headerHeight; if (typeof headerHeight !== 'number') { - headerHeight = $header.height(); + headerHeight = $header.outerHeight(); } else if ($.isFunction(headerHeight)) { headerHeight = headerHeight($header); } diff --git a/src/less/modules/modals.less b/src/less/modules/modals.less index 1b5996dc..fec5da82 100644 --- a/src/less/modules/modals.less +++ b/src/less/modules/modals.less @@ -221,5 +221,8 @@ } .modal-scroll-inside { + overflow: hidden!important; +} +.body-modal-scroll-inside { overflow: auto; } -- GitLab