Free Trial Buy
    Your search did not match any results.
    Popup

    Overview

    This example demonstrates how to show and hide the Popup component, populate it with content, specify its position and other settings.

    To see step-by-step instructions on how to get started with the DevExtreme Popup component, refer to the following tutorial: Getting Started with Popup.

    Show and Hide the Popup

    Call the show() method to display the Popup. To close a Popup, choose one of the following options:

    • Built-in close button
      Enable the showCloseButton property to display the Close button in a Popup's top toolbar.

    • Custom close button
      This demo shows how to add custom buttons to the Popup. One of them uses an onClick handler to call the hide() method that closes the Popup. Refer to the next section (Configure the Popup) to learn how you can populate a popup with custom controls.

    • On outside click
      Enable the hideOnOutsideClick property to allow users to hide the Popup by clicking outside the component.

    Configure the Popup

    The Popup inner area is divided into three parts:

    • Top toolbar

      • Predefined
        Set showTitle to true and use the title property to specify the caption. The Close button will appear if you do not disable the showCloseButton property.

      • Custom
        Add toolbarItems markup and set each item's toolbar property to top. If you want to display an item in the overflow menu, as shown in this demo, set the item's locateInMenu property to always. You can also assign never to this property to keep the item outside the overflow menu, or you can assign auto to hide the item in the menu if the Popup's width decreases.

    • Content area
      To populate the Popup with content, use the contentTemplate property.

    • Bottom toolbar
      To enable the bottom toolbar, declare the toolbarItems array as shown in this demo. Set each item's toolbar property to bottom. To learn more about toolbar configuration, refer to the following tutorial: Getting Started with Toolbar

    Resize and Position

    To specify Popup size, use the height and width properties.

    In this demo, each Popup's location is relative to the image. The code specifies the my, at, and of properties of the position object. The configuration in the demo reads as follows: "place my center side at the bottom side of the #image${employee.ID} element."

    Use the container property to select the container in which you want to render the Popup. If you set the container property to an element on the page, the shading applies to this element.

    Turn on the dragEnabled option to allow users to move the Popup around the page.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    window.onload = function () { const ViewModel = function () { const that = this; that.employees = ko.observableArray(employees); that.employee = ko.observable({}); that.positionOf = ko.observable(''); that.visiblePopup = ko.observable(false); that.popupOptions = { width: 300, height: 280, container: '.dx-viewport', contentTemplate: 'info', showTitle: true, title: 'Information', visible: that.visiblePopup, dragEnabled: false, hideOnOutsideClick: true, showCloseButton: false, position: { at: 'bottom', my: 'center', of: that.positionOf, collision: 'fit', }, toolbarItems: [{ widget: 'dxButton', toolbar: 'bottom', location: 'before', options: { icon: 'email', text: 'Send', onClick() { const message = `Email is sent to ${that.employee().FirstName} ${that.employee().LastName}`; DevExpress.ui.notify({ message, position: { my: 'center top', at: 'center top', }, }, 'success', 3000); }, }, }, { widget: 'dxButton', toolbar: 'bottom', location: 'after', options: { text: 'Close', onClick() { that.visiblePopup(false); }, }, }], }; that.showInfo = function (data) { that.employee(data.model); that.positionOf(`#image${that.employee().ID}`); that.visiblePopup(true); }; }; ko.applyBindings(new ViewModel(), document.getElementById('container')); };
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.2.3/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="container"> <h1>Employees</h1> <ul data-bind="foreach: employees"> <li> <img data-bind="attr: { src: $data.Picture, id: 'image' + $data.ID }" /><br/> <i data-bind="text: $data.FirstName"></i> <i data-bind="text: $data.LastName"></i><br/> <div class="button-info" data-bind="dxButton: { text: 'Details', onClick: $parent.showInfo }"></div> </li> </ul> <div data-bind="with: employee"> <div data-bind="dxPopup: $parent.popupOptions"> <div data-options="dxTemplate: { name:'info' }"> <p> Full Name: <span data-bind="text: $data.FirstName"></span> <span data-bind="text: $data.LastName"></span> </p> <p> Birth Date: <span data-bind="text: $data.BirthDate"></span> </p> <p> Address: <span data-bind="text: $data.Address"></span> </p> <p> Hire Date: <span data-bind="text: $data.HireDate"></span> </p> <p> Position: <span data-bind="text: $data.Position"></span> </p> </div> </div> </div> </div> </div> </body> </html>
    #container { padding: 10px; } #container ul { list-style-type: none; text-align: center; font-size: 0; } #container ul li { display: inline-block; width: 160px; margin: 10px; font-size: 14px; } #container ul li img { width: 100px; } .button-info { margin: 10px; } .dx-popup-content p { margin-bottom: 10px; margin-top: 0; }
    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', }];