diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Modals.md b/docs/en/UI/AspNetCore/Tag-Helpers/Modals.md index c811dee0bc..508d434671 100644 --- a/docs/en/UI/AspNetCore/Tag-Helpers/Modals.md +++ b/docs/en/UI/AspNetCore/Tag-Helpers/Modals.md @@ -11,7 +11,7 @@ Basic usage: ````xml Launch modal - + Woohoo, you're reading this text in a modal! @@ -33,6 +33,13 @@ A value indicates the positioning of the modal. Should be one of the following v * `false` (default value) * `true` +### Scrollable + +A value indicates the scrolling of the modal. Should be one of the following values: + +* `false` (default value) +* `true` + ### size A value indicates the size of the modal. Should be one of the following values: @@ -78,4 +85,4 @@ A value indicates the positioning of your modal footer buttons. Should be one of * `Center` * `Around` * `Between` -* `End` \ No newline at end of file +* `End` diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Modals.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Modals.md index 28b92254bd..3abebdde0c 100644 --- a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Modals.md +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Modals.md @@ -9,7 +9,7 @@ ````xml Launch modal - + Woohoo, you're reading this text in a modal! @@ -31,6 +31,13 @@ * `false` (默认值) * `true` +### Scrollable + +指定模态框滚动. 应为以下值之一: + +* `false` (默认值) +* `true` + ### size 指定模态框的大小. 应为以下值之一: @@ -76,4 +83,4 @@ * `Center` * `Around` * `Between` -* `End` \ No newline at end of file +* `End` diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelper.cs index 51688afceb..ece8916dc9 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelper.cs +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelper.cs @@ -6,6 +6,8 @@ public bool? Centered { get; set; } = false; + public bool? Scrollable { get; set; } = false; + public bool? Static { get; set; } = false; public AbpModalTagHelper(AbpModalTagHelperService tagHelperService) diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs index 9086d8def4..aa83265e94 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs @@ -1,112 +1,118 @@ -using Microsoft.AspNetCore.Html; -using Microsoft.AspNetCore.Mvc.Rendering; -using Microsoft.AspNetCore.Razor.TagHelpers; -using System.Text; -using System.Threading.Tasks; - -namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal -{ - public class AbpModalTagHelperService : AbpTagHelperService - { - public async override Task ProcessAsync(TagHelperContext context, TagHelperOutput output) - { - output.TagName = null; - - var childContent = await output.GetChildContentAsync(); - - SetContent(context, output, childContent); - } - - protected virtual void SetContent(TagHelperContext context, TagHelperOutput output, TagHelperContent childContent) - { - var modalContent = GetModalContentElement(context, output, childContent); - var modalDialog = GetModalDialogElement(context, output, modalContent); - var modal = GetModal(context, output, modalDialog); - - output.Content.SetHtmlContent(modal); - } - - protected virtual TagBuilder GetModalContentElement(TagHelperContext context, TagHelperOutput output, TagHelperContent childContent) - { - var element = new TagBuilder("div"); - element.AddCssClass(GetModalContentClasses()); - element.InnerHtml.SetHtmlContent(childContent); - return element; - } - - protected virtual TagBuilder GetModalDialogElement(TagHelperContext context, TagHelperOutput output, IHtmlContent innerHtml) - { - var element = new TagBuilder("div"); - element.AddCssClass(GetModalDialogClasses()); - element.Attributes.Add("role", "document"); - element.InnerHtml.SetHtmlContent(innerHtml); - return element; - } - - protected virtual TagBuilder GetModal(TagHelperContext context, TagHelperOutput output, IHtmlContent innerHtml) - { - var element = new TagBuilder("div"); - element.AddCssClass(GetModalClasses()); - element.Attributes.Add("tabindex", "-1"); - element.Attributes.Add("role", "dialog"); - element.Attributes.Add("aria-hidden", "true"); - - foreach (var attr in output.Attributes) - { - element.Attributes.Add(attr.Name, attr.Value.ToString()); - } - - SetDataAttributes(element); - - element.InnerHtml.SetHtmlContent(innerHtml); - - return element; - } - - protected virtual string GetModalClasses() - { - return "modal fade"; - } - - protected virtual string GetModalDialogClasses() - { - var classNames = new StringBuilder("modal-dialog"); - - if (TagHelper.Centered ?? false) - { - classNames.Append(" "); - classNames.Append("modal-dialog-centered"); - } - - if (TagHelper.Size != AbpModalSize.Default) - { - classNames.Append(" "); - classNames.Append(TagHelper.Size.ToClassName()); - } - - return classNames.ToString(); - } - - protected virtual string GetModalContentClasses() - { - return "modal-content"; - } - - protected virtual string GetDataAttributes() - { - if (TagHelper.Static == true) - { - return "data-backdrop=\"static\" "; - } - return string.Empty; - } - - protected virtual void SetDataAttributes(TagBuilder builder) - { - if (TagHelper.Static == true) - { - builder.Attributes.Add("data-backdrop", "static"); - } - } - } -} +using Microsoft.AspNetCore.Html; +using Microsoft.AspNetCore.Mvc.Rendering; +using Microsoft.AspNetCore.Razor.TagHelpers; +using System.Text; +using System.Threading.Tasks; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal +{ + public class AbpModalTagHelperService : AbpTagHelperService + { + public async override Task ProcessAsync(TagHelperContext context, TagHelperOutput output) + { + output.TagName = null; + + var childContent = await output.GetChildContentAsync(); + + SetContent(context, output, childContent); + } + + protected virtual void SetContent(TagHelperContext context, TagHelperOutput output, TagHelperContent childContent) + { + var modalContent = GetModalContentElement(context, output, childContent); + var modalDialog = GetModalDialogElement(context, output, modalContent); + var modal = GetModal(context, output, modalDialog); + + output.Content.SetHtmlContent(modal); + } + + protected virtual TagBuilder GetModalContentElement(TagHelperContext context, TagHelperOutput output, TagHelperContent childContent) + { + var element = new TagBuilder("div"); + element.AddCssClass(GetModalContentClasses()); + element.InnerHtml.SetHtmlContent(childContent); + return element; + } + + protected virtual TagBuilder GetModalDialogElement(TagHelperContext context, TagHelperOutput output, IHtmlContent innerHtml) + { + var element = new TagBuilder("div"); + element.AddCssClass(GetModalDialogClasses()); + element.Attributes.Add("role", "document"); + element.InnerHtml.SetHtmlContent(innerHtml); + return element; + } + + protected virtual TagBuilder GetModal(TagHelperContext context, TagHelperOutput output, IHtmlContent innerHtml) + { + var element = new TagBuilder("div"); + element.AddCssClass(GetModalClasses()); + element.Attributes.Add("tabindex", "-1"); + element.Attributes.Add("role", "dialog"); + element.Attributes.Add("aria-hidden", "true"); + + foreach (var attr in output.Attributes) + { + element.Attributes.Add(attr.Name, attr.Value.ToString()); + } + + SetDataAttributes(element); + + element.InnerHtml.SetHtmlContent(innerHtml); + + return element; + } + + protected virtual string GetModalClasses() + { + return "modal fade"; + } + + protected virtual string GetModalDialogClasses() + { + var classNames = new StringBuilder("modal-dialog"); + + if (TagHelper.Centered ?? false) + { + classNames.Append(" "); + classNames.Append("modal-dialog-centered"); + } + + if (TagHelper.Scrollable ?? false) + { + classNames.Append(" "); + classNames.Append("modal-dialog-scrollable"); + } + + if (TagHelper.Size != AbpModalSize.Default) + { + classNames.Append(" "); + classNames.Append(TagHelper.Size.ToClassName()); + } + + return classNames.ToString(); + } + + protected virtual string GetModalContentClasses() + { + return "modal-content"; + } + + protected virtual string GetDataAttributes() + { + if (TagHelper.Static == true) + { + return "data-backdrop=\"static\" "; + } + return string.Empty; + } + + protected virtual void SetDataAttributes(TagBuilder builder) + { + if (TagHelper.Static == true) + { + builder.Attributes.Add("data-backdrop", "static"); + } + } + } +} diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml index ad2f4a602c..315d018146 100644 --- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml @@ -34,7 +34,7 @@
Launch modal - + Woohoo, you're reading this text in a modal! @@ -45,16 +45,16 @@
- 

-    <abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button>
-
-    <abp-modal centered="true" size="Large" id="myModal">
-    <abp-modal-header title="Modal title"></abp-modal-header>
-    <abp-modal-body>
-    Woohoo, you're reading this text in a modal!
-    </abp-modal-body>
-    <abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)"></abp-modal-footer>
-    </abp-modal>
+                

+    <abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button>
+
+    <abp-modal centered="true" scrollable="true" size="Large" id="myModal">
+    <abp-modal-header title="Modal title"></abp-modal-header>
+    <abp-modal-body>
+    Woohoo, you're reading this text in a modal!
+    </abp-modal-body>
+    <abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)"></abp-modal-footer>
+    </abp-modal>
 

             
             
@@ -66,7 +66,7 @@
 
 <!-- Modal -->
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>