DevExtreme Vue - Overview
The Popup widget is a pop-up window overlaying the current view.
The following code adds a simple Popup to your page, along with a Button that invokes it. The simplest configuration of the Popup requires the content and title to be specified.
- <template>
- <div>
- <DxPopup
- title="Popup Title"
- :visible.sync="isPopupVisible">
- <template>
- <p>Popup content</p>
- </template>
- </DxPopup>
- <DxButton
- text="Show the Popup"
- @click="onClick"
- />
- </div>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxPopup } from 'devextreme-vue/popup';
- import { DxButton } from 'devextreme-vue/button';
- export default {
- components: {
- DxPopup,
- DxButton
- },
- data() {
- return {
- isPopupVisible: false
- };
- },
- methods: {
- onClick() {
- this.isPopupVisible = true;
- }
- }
- }
- </script>
There are several ways to specify the content of the Popup. Learn more in the Customize the Content article. The Popup can also be displayed with a toolbar. For detailed information, see the Specify Toolbar Items topic.
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Popup - Customize the Appearance
- Popup - Show and Hide the Popup
- Popup - Resize and Relocate
- Popup API Reference
If you have technical questions, please create a support ticket in the DevExpress Support Center.