Popup: rewrite Show and Hide the Popup (#6737)

DevExpress · Oct 24, 2024 · 9c57572 · 9c57572
1 parent 50b3209
commit 9c57572
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 3 deletions.
diff --git a/...Hide the Popup/15 Using DxPopupService.md → ...Hide the Popup/03 Using DxPopupService.md b/...Hide the Popup/15 Using DxPopupService.md → ...Hide the Popup/03 Using DxPopupService.md
@@ -1,6 +1,6 @@
 DevExtreme Popup includes a `DxPopupService` that allows you to initiate popups directly from .ts files without template code. The use of [services](https://angular.dev/guide/di/creating-injectable-service) that display popups is a common practice in Angular libraries. 
 
-`DxPopupService` is imported from `'devextreme-angular/ui/popup'` and functions as a typical Angular service. The service has one method, `open` that takes two arguments:
+`DxPopupService` is imported from `'devextreme-angular/ui/popup'` and functions as a typical Angular service. To show a Popup with `DxPopupService`, call the `open` method. The method takes two arguments:
 
 1. The Angular component class to be used as the content of the popup.
 2. The popup configuration, which includes [properties](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/') of the Popup component.
@@ -74,4 +74,41 @@ The `open` method returns a `DxPopupServiceComponent` object. This type extends
 
 ---
 
+You can access the Popup instance through `DxPopupServiceComponent`. Call the [hide()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#hide') method to close the Popup programmatically:
+
+---
+##### Angular
+
+    <!-- tab: app.component.ts -->
+    import { DxPopupService, DxPopupServiceComponent } from 'devextreme-angular/ui/popup';
+    // ...
+    export class AppComponent {
+        employees: Employee[];
+        popupRef!: DxPopupServiceComponent;
+
+        constructor(
+            employeeService: EmployeeService,
+            private popupService: DxPopupService
+        ) {
+            this.employees = employeeService.getEmployees();
+        }
+
+        showInfo(employee: Employee) {
+            this.popupRef = this.popupService.open(EmployeeInfoComponent, {
+                showTitle: true,
+                title: 'Information',
+                container: 'html',
+                width: 300
+            });
+
+            this.popupRef.contentRef.instance.currentEmployee = employee;
+        }
+
+        closePopup() {
+            this.popupRef.instance.hide();
+        }
+    }
+
+---
+
 [tags] angular
diff --git a/concepts/05 UI Components/Popup/10 Show and Hide the Popup/05 User Interaction.md b/concepts/05 UI Components/Popup/10 Show and Hide the Popup/05 User Interaction.md
@@ -1,4 +1,66 @@
-The Popup can also be hidden when a user clicks outside it. To control this behavior of the Popup, use the [hideOnOutsideClick](/api-reference/10%20UI%20Components/dxOverlay/1%20Configuration/hideOnOutsideClick.md '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/#hideOnOutsideClick') property.
+Enable the [showCloseButton](/Documentation/ApiReference/UI_Components/dxPopup/Configuration/#showCloseButton) property to allow a user to hide the Popup component by clicking the **Close** button.
+
+---
+##### jQuery
+
+    <!--JavaScript-->
+    $(function() {
+        $("#popupContainer").dxPopup({
+            showTitle: true,
+            showCloseButton: true
+        });
+    });
+
+##### Angular
+
+    <!--HTML-->
+    <dx-popup
+        [showTitle]="true"
+        [showCloseButton]="true">
+    </dx-popup>
+
+##### Vue
+
+    <template>
+        <DxPopup
+            :show-title="true"
+            :show-close-button:"true"
+        />
+    </template>
+
+    <script>
+    import 'devextreme/dist/css/dx.light.css';
+
+    import { DxPopup } from 'devextreme-vue/popup';
+
+    export default {
+        components: {
+            DxPopup
+        }
+    }
+    </script>
+
+##### React
+
+    import React from 'react';
+    import 'devextreme/dist/css/dx.light.css';
+
+    import { Popup } from 'devextreme-react/popup';
+
+    class App extends React.Component {
+        return (
+            <Popup
+                showTitle={true}
+                showCloseButton={true}
+            />
+        );
+    }
+
+    export default App;
+
+---
+
+The Popup can also be hidden when a user clicks outside of it. To control this Popup behavior, use the [hideOnOutsideClick](/api-reference/10%20UI%20Components/dxOverlay/1%20Configuration/hideOnOutsideClick.md '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/#hideOnOutsideClick') property.
 
 ---
 ##### jQuery
@@ -99,4 +161,10 @@ The Popup can also be hidden when a user clicks outside it. To control this beha
 
     export default App;
 
----
+---
+
+You can also implement a custom **Close** button inside the Popup. Refer to the following demo for more information:
+
+#include btn-open-demo with {
+    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Popup/Overview/"
+}