Question

我有一个很好的实现，凯尔的帮助，用于引导模态对话框的 Blazor 组件：How to use Bootstrap modal in Blazor client app? 但我想扩展这个解决方案，使模态可拖动和调整大小。

最好的方法（避免重新发明轮子）似乎是使用 JQuery UI draggable()/resizeable() 函数。我有这个链接来演示如何在纯 Javascript 中执行此操作：DRAG AND RESIZE BOOTSTRAP MODAL 本质上调用了模态 div 上的可调整大小和可拖动函数

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
    $('.modal-content').resizable({
        //alsoResize: ".modal-dialog",
        minHeight: 300,
        minWidth: 300
    });
    $('.modal-dialog').draggable();
</script>

我已尝试将此脚本添加到我的 _Host.cshtml 页面，但没有效果。关于如何将 blazor 组件解决方案与 jquery UI 解决方案合并的任何建议将不胜感激

大卫

Answer 1

答案是在 OnAfterRenderAsync 覆盖中显式调用 javascript 函数，以将 JQuery UI 函数应用于模态 div。

例如

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await jsRuntime.InvokeVoidAsync("setModalDraggableAndResizable");
        await base.OnAfterRenderAsync(firstRender);
    }

其中 setModalDraggableAndResizable 是 _Hosts.cshtml 中的 javascript 函数：

    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        function setModalDraggableAndResizable() {
            $('.modal-content').resizable({
                //alsoResize: ".modal-dialog",
                minHeight: 300,
                minWidth: 300
            });
            $('.modal-dialog').draggable();
        }
    </script>

并且模态现在可以拖动和调整大小...

Modal example image

Blazor 可拖动/可调整大小的模态引导对话框

1 个答案: