feat: 支持 modal 组件

This commit is contained in:
Argo Window10 2019-11-28 10:47:13 +08:00
parent 41e69b820c
commit bfc1869d5f
4 changed files with 47 additions and 0 deletions

View File

@ -46,5 +46,11 @@ namespace Bootstrap.Admin.Extensions
/// </summary>
/// <param name="jSRuntime"></param>
public static void EnableAnimation(this IJSRuntime? jSRuntime) => jSRuntime.InvokeVoidAsync("$.enableAnimation");
/// <summary>
/// 修复 Modal 组件
/// </summary>
/// <param name="jSRuntime"></param>
public static void InitModal(this IJSRuntime? jSRuntime) => jSRuntime.InvokeVoidAsync("$.initModal");
}
}

View File

@ -57,6 +57,8 @@
</div>
</div>
<Modal></Modal>
@code {
}

View File

@ -0,0 +1,36 @@
@inject IJSRuntime JSRuntime
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
@code {
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JSRuntime.InitModal();
}
}
}

View File

@ -115,6 +115,9 @@
enableBackground: function (val) {
if (val) $('.main-content').addClass('welcome-bg').find('nav').addClass('d-none').removeClass('d-flex');
else $('.main-content').removeClass('welcome-bg').find('nav').addClass('d-flex').removeClass('d-none');
},
initModal: function () {
$('.modal').appendTo($('body'));
}
});