From 65eb5d101a5b3250f8dfde9238441f800a3f4127 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 10 Apr 2024 14:56:23 +0300
Subject: [PATCH] Merge window-kb-backdrop-blur-2029 into production (#2030)

* docs(Window): add kb for backdrop blur

* docs(window): fixes as per comments

---------

Co-authored-by: Hristian Stefanov <Hristian.Stefanov@progress.com>
---
 knowledge-base/window-backdrop-blur.md | 71 ++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 knowledge-base/window-backdrop-blur.md

diff --git a/knowledge-base/window-backdrop-blur.md b/knowledge-base/window-backdrop-blur.md
new file mode 100644
index 000000000..b5313b3b3
--- /dev/null
+++ b/knowledge-base/window-backdrop-blur.md
@@ -0,0 +1,71 @@
+---
+title: Apply a Backdrop Filter with a Blur Effect to the Modal Window Background
+description: How to apply a backdrop filter with a blur effect to the background content of the Modal Window.
+type: how-to
+page_title: Apply a Backdrop Filter with a Blur Effect to the Modal Window Background
+slug: window-kb-backdrop-blur
+position: 
+tags: 
+ticketid: 1642061
+res_type: kb
+---
+
+## Environment
+<table>
+	<tbody>
+		<tr>
+			<td>Product</td>
+			<td>Window for Blazor</td>
+		</tr>
+	</tbody>
+</table>
+
+## Description
+
+This knowledge base article answers the following questions:
+
+* How do I blur the background in a Modal Window component?
+* Is it possible to apply a backdrop filter with a blur effect on the background content of the Window?
+
+## Solution
+
+To adjust the blur amount, override the built-in CSS styles of the background. Use the code below to achieve the desired results.
+
+This code will affect all modal Dialogs and Windows on the web page.
+
+````CSHTML
+<style>
+    div.k-overlay {
+        /* prerequisites to make the blurring work with this CSS class */
+        opacity: 1;
+        background-color: transparent;
+        /* blurring itself */
+        -webkit-backdrop-filter: blur(4px); /* Safari */
+        backdrop-filter: blur(4px);
+    }
+</style>
+
+<TelerikWindow @bind-Visible="@WindowIsVisible"
+               Modal="true">
+    <WindowTitle>
+        Product Details
+    </WindowTitle>
+    <WindowContent>
+        <div class="p-4">
+            <h2>Product Name: Widget X</h2>
+            <p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac odio velit. Integer vel turpis vestibulum, tincidunt lacus at, rutrum sapien.</p>
+            <p>Price: $49.99</p>
+            <p>Availability: In Stock</p>
+        </div>
+    </WindowContent>
+    <WindowActions>
+        <WindowAction Name="Close" />
+    </WindowActions>
+</TelerikWindow>
+
+<TelerikButton OnClick="@( () => WindowIsVisible = !WindowIsVisible )">Show Product Details</TelerikButton>
+
+@code {
+    private bool WindowIsVisible { get; set; }
+}
+````
\ No newline at end of file