Created modal UI by copying from Angular site.

Author: hikalkan

src/AbpCompanyName.AbpProjectName.WebMpa/AbpCompanyName.AbpProjectName.WebMpa.csproj

@@ -379,6 +379,7 @@
     <Content Include="Views\Account\Login.min.css">
       <DependentUpon>Login.css</DependentUpon>
     </Content>
+    <Content Include="Views\Tenants\Index.js" />
     <Content Include="Web.config">
       <SubType>Designer</SubType>
     </Content>

src/AbpCompanyName.AbpProjectName.WebMpa/Views/Tenants/Index.cshtml

@@ -1,12 +1,18 @@
-@model Abp.Application.Services.Dto.ListResultOutput<AbpCompanyName.AbpProjectName.MultiTenancy.Dto.TenantListDto>
+@using Abp.Web.Mvc.Extensions
+@using AbpCompanyName.AbpProjectName.MultiTenancy
+@model Abp.Application.Services.Dto.ListResultOutput<AbpCompanyName.AbpProjectName.MultiTenancy.Dto.TenantListDto>
 @{
     ViewBag.ActiveMenu = "Tenants"; //The menu item will be active for this page.
 }
+@section scripts
+{
+    @Html.IncludeScript("~/Views/Tenants/Index.js")
+}
 <div>
     <h1>@L("Tenants")</h1>
     <div class="row">
         <div class="col-md-12">
-            <button ng-click="vm.openTenantCreationModal()" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> @L("CreateNewTenant")</button>
+            <button data-toggle="modal" data-target="#TenantCreateModal" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> @L("CreateNewTenant")</button>
             <table class="table">
                 <thead>
                     <tr>
@@ -26,4 +32,45 @@
             </table>
         </div>
     </div>
-</div>
+</div>
+
+<div class="modal fade" id="TenantCreateModal" tabindex="-1" role="dialog" aria-labelledby="TenantCreateModalLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <form name="tenantCreateForm" role="form" novalidate class="form-validation">
+                <div class="modal-header">
+                    <h4 class="modal-title">
+                        <span>@L("CreateNewTenant")</span>
+                    </h4>
+                </div>
+                <div class="modal-body">
+
+                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
+                        <label>@L("TenancyName")</label>
+                        <input auto-focus class="form-control" type="text" name="TenancyName" ng-model="vm.tenant.tenancyName" required maxlength="@Tenant.MaxTenancyNameLength" ng-pattern="/@Tenant.TenancyNameRegex/">
+                    </div>
+                    <div>
+                        <span class="help-block text-danger" ng-show="!tenantCreateForm.TenancyName.$valid && tenantCreateForm.TenancyName.$dirty">@L("TenantName_Regex_Description")</span>
+                    </div>
+
+                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
+                        <label>@L("Name")</label>
+                        <input type="text" name="Name" class="form-control" ng-model="vm.tenant.name" required maxlength="@Tenant.MaxNameLength">
+                    </div>
+
+                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
+                        <label>@L("AdminEmailAddress")</label>
+                        <input type="email" name="AdminEmailAddress" class="form-control" ng-model="vm.tenant.adminEmailAddress" required maxlength="@AbpCompanyName.AbpProjectName.Users.User.MaxEmailAddressLength">
+                    </div>
+
+                    <p>@L("DefaultPasswordIs", AbpCompanyName.AbpProjectName.Users.User.DefaultPassword)</p>
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">@L("Cancel")</button>
+                    <button id="TenantCreateModalSaveButton" type="submit" class="btn btn-primary blue" ng-disabled="tenantCreateForm.$invalid"><i class="fa fa-save"></i> <span>@L("Save")</span></button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/AbpCompanyName.AbpProjectName.WebMpa/Views/Tenants/Index.js

@@ -0,0 +1,10 @@
+(function() {
+    $(function() {
+
+        $('#TenantCreateModalSaveButton').click(function(e) {
+            e.preventDefault();
+            alert('saving...');
+        });
+
+    });
+})();