JavaScript/jQuery Popup - Customize the Title

By default, the JavaScript Popup allocates a part of its area to the title, regardless of whether you specified the title text or did not. To hide the title, set the showTitle property to false. Besides the text, the title area also contains a button that closes the JavaScript Popup. To hide this button alone, assign false to the showCloseButton property.

jQuery
JavaScript
$(function() {
    $("#popupContainer").dxPopup({
        showTitle: false,
        visible: true
    });
});
Angular
HTML
TypeScript
<dx-popup
    [showTitle]="false"
    [(visible)]="isPopupVisible">
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})
Vue
<template>
    <DxPopup
        v-model:visible="isPopupVisible"
        :show-title="false"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxPopup } from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            isPopupVisible: true
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { JavaScript Popup } from 'devextreme-react/popup';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isPopupVisible: true
        };

        this.onHiding = this.onHiding.bind(this);
    }

    onHiding() {
        this.setState({
            isPopupVisible: false
        });
    }

    render() {
        return (
            <JavaScript Popup
                visible={this.state.isPopupVisible}
                showTitle={false}
                onHiding={this.onHiding}
            />
        );
    }
}

export default App;

If you need to define the title completely, specify a template for it as shown in the following code:

jQuery
HTML
JavaScript
<div id="popupContainer">
    <p>JavaScript Popup content</p>
    <div data-options="dxTemplate: { name: 'title' }">
        <p>Title template</p>
    </div>
</div>
$(function() {
    $("#popupContainer").dxPopup({
        titleTemplate: "title"
    });
});
Angular
HTML
TypeScript
<dx-popup
    [(visible)]="isPopupVisible"
    titleTemplate="title">
    <div *dxTemplate="let data of 'content'">
        <p>JavaScript Popup content</p>
    </div>
    <div *dxTemplate="let data of 'title'">
        <p>Title template</p>
    </div>
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})
Vue
<template>
    <DxPopup
        v-model:visible="isPopupVisible"
        titleTemplate="title">
        <template>
            <p>JavaScript Popup content</p>
        </template>
        <template #title>
            <p>Title template</p>
        </template>
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxPopup } from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            isPopupVisible: true
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { JavaScript Popup } from 'devextreme-react/popup';

const renderContent = () => {
    return (
        <p>JavaScript Popup content</p>
    );
}

const renderTitle = () => {
    return (
        <p>Title template</p>
    );
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isPopupVisible: true
        };

        this.onHiding = this.onHiding.bind(this);
    }

    onHiding() {
        this.setState({
            isPopupVisible: false
        });
    }

    render() {
        return (
            <JavaScript Popup
                visible={this.state.isPopupVisible}
                contentRender={renderContent}
                titleRender={renderTitle}
                onHiding={this.onHiding}
            />
        );
    }
}

export default App;

You can switch title templates on the fly just as you can do with content templates. Refer to the Switching Templates On the Fly topic for more information.

See Also