DevExtreme jQuery - Overview
The JavaScript Popup widget is a pop-up window overlaying the current view.
The following code adds a simple JavaScript Popup to your page, along with a JavaScript Button that invokes it. The simplest configuration of the JavaScript Popup requires the content and title to be specified.
jQuery
HTML
JavaScript
<div id="popupContainer">
<p>JavaScript Popup content</p>
</div>
<div id="buttonContainer"></div>
$(function() {
$("#popupContainer").dxPopup({
title: "JavaScript Popup Title"
});
$("#buttonContainer").dxButton({
text: "Show the JavaScript Popup",
onClick: function () {
$("#popupContainer").dxPopup("show");
}
});
});Angular
HTML
TypeScript
<dx-popup
title="JavaScript Popup Title"
[(visible)]="isPopupVisible">
<div *dxTemplate="let data of 'content'">
<p>JavaScript Popup content</p>
</div>
</dx-popup>
<dx-button
text="Show the JavaScript Popup"
(onClick)="isPopupVisible = true">
</dx-button>
import { DxPopupModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
isPopupVisible: boolean = false;
}
@NgModule({
imports: [
// ...
DxPopupModule,
DxButtonModule
],
// ...
})There are several ways to specify the content of the JavaScript Popup. Learn more in the Customize the Content article. The JavaScript Popup can also be displayed with a toolbar. For detailed information, see the Specify Toolbar Items topic.
See Also
Feedback