JavaScript/jQuery Popup - Customize the Content

Specifying the Content Template

The example below shows how to create a template consisting of static (text) and dynamic (the Button UI component) content.

HTML
  • $(function() {
  • $("#popupContainer").dxPopup({
  • title: "Popup Title",
  • visible: true,
  • contentTemplate: function (contentElement) {
  • contentElement.append(
  • $("<p />").text("Static Content"),
  • $("<div />").attr("id", "buttonContainer").dxButton({
  • text: "Click me",
  • onClick: function (e) {
  • // ...
  • }
  • });
  • )
  • }
  • });
  • });

Switching Templates On the Fly

If you need to render different templates depending on a specific condition, define them inside the Popup container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.

HTML
JavaScript
  • <div id="changeTemplateButton"></div>
  • <div id="popupContainer">
  • <div data-options="dxTemplate: { name: 'template1' }">
  • <p>First template</p>
  • </div>
  • <div data-options="dxTemplate: { name: 'template2' }">
  • <p>Second template</p>
  • </div>
  • </div>
  • $(function() {
  • const popup = $("#popupContainer").dxPopup({
  • title: "Popup Title",
  • visible: true,
  • contentTemplate: "template1"
  • }).dxPopup("instance");
  •  
  • $("#changeTemplateButton").dxButton({
  • text: "Change the Template",
  • onClick: function (e) {
  • const currentTemplate = popup.option("contentTemplate");
  • popup.option("contentTemplate", currentTemplate == "template1" ? "template2" : "template1");
  • popup.show();
  • }
  • });
  • });
See Also

Add Scrolling

The Popup component always displays a native scrollbar when the height of the Popup's content is greater than that of the Popup.

You can also implement a scrollbar that belongs to the ScrollView component. This implementation is more flexible. For example, you can enable right-to-left representation or scroll the content to a specific position. For more information about the available options, refer to the ScrollView API section.

To implement this solution, follow the steps below:

  1. Wrap the content in the ScrollView component and place it in the Popup container.

  2. Set the height and width of the ScrollView to 100% of the popup content area.

index.js
  • $(function () {
  • $("#popup").dxPopup({
  • contentTemplate: () => {
  • const content = $("<div />");
  • content.dxScrollView({
  • height: "100%",
  • width: "100%"
  • });
  • return content;
  • },
  • // ...
  • });
  • });