DevExtreme Vue - Overview

The Popup widget is a pop-up window overlaying the current view.

View Demo

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