Your search did not match any results.
Popup

Popup

Documentation

The Popup widget is a pop-up window overlaying the current view. Use this widget to display specified content in a popup window. In this demo, the content is specified using a custom template.

Copy to CodeSandBox
Apply
Reset
<template> <div id="popup"> <h1>Employees</h1> <ul> <employee-item v-for="employee in employees" :key="employee.ID" :employee="employee" :show-info="showInfo" /> </ul> <dx-popup :visible.sync="popupVisible" :drag-enabled="false" :close-on-outside-click="true" :show-title="true" :width="300" :height="250" class="popup" title="Information" > <p> Full Name:&nbsp; <span>{{ currentEmployee.FirstName }}</span>&nbsp; <span>{{ currentEmployee.LastName }}</span> </p> <p> Birth Date: <span>{{ currentEmployee.BirthDate }}</span> </p> <p> Address: <span>{{ currentEmployee.Address }}</span> </p> <p> Hire Date: <span>{{ currentEmployee.HireDate }}</span> </p> <p> Position: <span>{{ currentEmployee.Position }}</span> </p> </dx-popup> </div> </template> <script> import { DxPopup } from 'devextreme-vue/popup'; import EmployeeItem from './EmployeeItem.vue'; import { employees } from './data.js'; export default { components: { DxPopup, EmployeeItem }, data() { return { employees, currentEmployee: {}, popupVisible: false }; }, methods: { showInfo(employee) { this.currentEmployee = employee; this.popupVisible = true; } } }; </script> <style> #popup { padding: 10px; } #popup ul { list-style-type: none; text-align: center; } #popup ul li { display: inline-block; width: 160px; margin: 10px; } #popup ul li img { width: 100px; } .button-info { margin: 10px; } .popup p { margin-bottom: 10px; margin-top: 0; } </style>
<template> <li> <img :src="employee.Picture"><br> <i>{{ employee.FirstName }} {{ employee.LastName }}</i><br> <dx-button :on-click="showEmployeeInfo" class="button-info" text="Details" /> </li> </template> <script> import { DxButton } from 'devextreme-vue/button'; export default { components: { DxButton }, props: { employee: { type: Object, required: true, default: () => ({}) }, showInfo: { type: Function, required: true, default: () => {} } }, methods: { showEmployeeInfo() { this.showInfo(this.employee); } } }; </script>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
export const employees = [{ 'ID': 7, 'FirstName': 'Sandra', 'LastName': 'Johnson', 'Prefix': 'Mrs.', 'Position': 'Controller', 'Picture': '../../../../images/employees/06.png', 'BirthDate': '1974/11/15', 'HireDate': '2005/05/11', 'Notes': "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.", 'Address': '4600 N Virginia Rd.' }, { 'ID': 10, 'FirstName': 'Kevin', 'LastName': 'Carter', 'Prefix': 'Mr.', 'Position': 'Shipping Manager', 'Picture': '../../../../images/employees/07.png', 'BirthDate': '1978/01/09', 'HireDate': '2009/08/11', 'Notes': 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.', 'Address': '424 N Main St.' }, { 'ID': 11, 'FirstName': 'Cynthia', 'LastName': 'Stanwick', 'Prefix': 'Ms.', 'Position': 'HR Assistant', 'Picture': '../../../../images/employees/08.png', 'BirthDate': '1985/06/05', 'HireDate': '2008/03/24', 'Notes': 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!', 'Address': '2211 Bonita Dr.' }, { 'ID': 30, 'FirstName': 'Kent', 'LastName': 'Samuelson', 'Prefix': 'Dr.', 'Position': 'Ombudsman', 'Picture': '../../../../images/employees/02.png', 'BirthDate': '1972/09/11', 'HireDate': '2009/04/22', 'Notes': 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field. He is a classically trained musician and is a member of the Chamber Orchestra.', 'Address': '12100 Mora Dr' }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });