Modal tag helper improvements

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs

@@ -1,4 +1,6 @@
-using System.Text;
+using System;
+using System.Linq;
+using System.Text;
 using Microsoft.AspNetCore.Razor.TagHelpers;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@@ -8,15 +10,18 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
         public override void Process(TagHelperContext context, TagHelperOutput output)
         {
             output.TagName = null;
-            output.PreContent.SetHtmlContent(CreatePreContent());
+            output.PreContent.SetHtmlContent(CreatePreContent(output));
             output.PostContent.SetHtmlContent(CreatePostContent());
         }
 
-        protected virtual string CreatePreContent()
+        protected virtual string CreatePreContent(TagHelperOutput output)
         {
             var sb = new StringBuilder();
 
-            sb.AppendLine("<div class=\""+ GetModalClasses() + "\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">");
+            var attritubutes = output.Attributes.Select(a => " " + a.Name + "=\"" + a.Value + "\" ").ToList();
+            var attritubutesAsJoin = String.Join(" ", attritubutes.ToArray()); 
+
+            sb.AppendLine("<div class=\""+ GetModalClasses() + "\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" "+ attritubutesAsJoin + ">");
             sb.AppendLine("    <div class=\"" + GetModalDialogClasses() + "\" role=\"document\">");
             sb.AppendLine("        <div class=\"" + GetModalContentClasses() + "\">");
 

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml

@@ -7,17 +7,18 @@
 
 <h2>Modals</h2>
 
-<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/modals/" target="_blank"> Bootstrap Modal</a>.</p>
+<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/modal/" target="_blank"> Bootstrap Modal</a>.</p>
 
 <h4># Modal Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
+        <abp-button button-type="Success" data-toggle="modal" data-target="#myModal">Launch modal</abp-button>
+
+        <abp-modal id="myModal">
 
-        <abp-modal>
-            
             <abp-modal-header title="Header"></abp-modal-header>
-            
+
             <abp-modal-body>
                 Body
             </abp-modal-body>
@@ -29,7 +30,7 @@
     </div>
     <div class="code-area">
         <pre>
-&lt;abp-modal&gt;
+&lt;abp-modal id=&quot;myModal&quot;&gt;
    &lt;abp-modal-header title=&quot;Header&quot;&gt;&lt;/abp-modal-header&gt;
    &lt;abp-modal-body&gt;
        Body