ejmDialog
5 Jun 202324 minutes to read
The Essential JavaScript Mobile Dialog widget is an overlay positioned within the page and it displays a message such as supplementary content like images or text, and interactive content like forms. It contains a title, a content area and buttons for user interaction.
Custom Design for HTML Dialog control.
$(element).ejmDialog()
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog();
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>Requires
-
module:jQuery
-
module:ej.core
-
module:ej.unobtrusive
-
module:ej.mobile.core
-
module:ej.data
-
module:ej.touch
-
module:ej.mobile.scrollbar
-
module:ej.mobile.scrollpanel
Members
allowScrolling boolean
Specifies whether to allow scrolling behavior for the contents. If this property set as true, ejmDialog will render scrollpanel automatically if the contents exceeds the content area.
Default Value
- false
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-height="200px" data-ej-allowscrolling="true">
<div>
London : London, one of the most popular tourist destinations in the world for a reason. A cultural and historical hub, London has an excellent public transportation system that allows visitors to see all the fantastic sights without spending a ton of money on a rental car.
London contains four World Heritage Sites.
paris : Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism that oozes from every one of its beautiful corners.You couldn't possibly visit Paris without seeing the Eiffel Tower.
Even if you do not want to visit this world famous structure, you will see its top from all over Paris.
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
London : London, one of the most popular tourist destinations in the world for a reason. A cultural and historical hub, London has an excellent public transportation system that allows visitors to see all the fantastic sights without spending a ton of money on a rental car.
London contains four World Heritage Sites.
paris : Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism that oozes from every one of its beautiful corners.You couldn't possibly visit Paris without seeing the Eiffel Tower.
Even if you do not want to visit this world famous structure, you will see its top from all over Paris.
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ height: "200px", allowScrolling: true });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>closeOndocumentTap boolean
Specifies whether the Dialog close while click on the document. If it is set as false, user need to handle Dialog close manually.
Default Value
- false
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-closeondocumenttap="true" >
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ closeOndocumentTap: true });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>cssClass string
Sets the root class for Dialog theme. This cssClass API helps to use custom skinning option for Dialog control. By defining the root class using this API, we need to include this root class in CSS.
Default Value
- ””
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-cssclass="customclass" >
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>
<style>
.customclass .e-m-dlg-content *{
color: red;
}
</style><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ cssClass: "customclass" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>
<style>
.customclass .e-m-dlg-content *{
color: red;
}
</style>enableAnimation boolean
Enables or Disables animation effect on opening or closing the Dialog.
Default Value
- true
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-enableanimation="false">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ enableAnimation: false });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>enableAutoOpen boolean
Specifies whether to open the Dialog on initial loading.
Default Value
- false
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-enableautoopen="true">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ enableAutoOpen: true });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>enableModal boolean
Specifies whether to enable modal for the Dialog or not.
Default Value
- true
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-enablemodal="false">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ enableModal: false });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>enableNativeScrolling boolean
Specifies whether to enable device’s native scroll behavior when scrolling is allowed.
NOTE
To achieve this behavior, the allowScrolling property should be set as true.
Default Value
- false
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-height="200px" data-ej-allowscrolling="true" data-ej-enablenativescrolling="true">
<div>
London : London, one of the most popular tourist destinations in the world for a reason. A cultural and historical hub, London has an excellent public transportation system that allows visitors to see all the fantastic sights without spending a ton of money on a rental car.
London contains four World Heritage Sites.
paris : Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism that oozes from every one of its beautiful corners.You couldn't possibly visit Paris without seeing the Eiffel Tower.
Even if you do not want to visit this world famous structure, you will see its top from all over Paris.
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
London : London, one of the most popular tourist destinations in the world for a reason. A cultural and historical hub, London has an excellent public transportation system that allows visitors to see all the fantastic sights without spending a ton of money on a rental car.
London contains four World Heritage Sites.
paris : Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism that oozes from every one of its beautiful corners.You couldn't possibly visit Paris without seeing the Eiffel Tower.
Even if you do not want to visit this world famous structure, you will see its top from all over Paris.
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ height: "200px", allowScrolling: true ,enableNativeScrolling:true});
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>enablePersistence boolean
Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.
Default Value
- false
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-enablepersistence="true">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ enablePersistence: true });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>height string
Specifies the height of Dialog content.
Default Value
- true
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-height="200px">
<div>
London : London, one of the most popular tourist destinations in the world for a reason. A cultural and historical hub, London has an excellent public transportation system that allows visitors to see all the fantastic sights without spending a ton of money on a rental car.
London contains four World Heritage Sites.
paris : Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism that oozes from every one of its beautiful corners.You couldn't possibly visit Paris without seeing the Eiffel Tower.
Even if you do not want to visit this world famous structure, you will see its top from all over Paris.
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
London : London, one of the most popular tourist destinations in the world for a reason. A cultural and historical hub, London has an excellent public transportation system that allows visitors to see all the fantastic sights without spending a ton of money on a rental car.
London contains four World Heritage Sites.
paris : Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism that oozes from every one of its beautiful corners.You couldn't possibly visit Paris without seeing the Eiffel Tower.
Even if you do not want to visit this world famous structure, you will see its top from all over Paris.
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ height: "200px" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>leftButtonCaption string
Specifies the text of left button. For alert mode Dialog, this property specifies the alert button text.
Default Value
- Cancel
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-leftbuttoncaption="Done">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ leftButtonCaption: "Done" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>locale string
Specifies the localization to adopt the required language. In Dialog control title, left and right button captions are given localization support.
Default Value
- “en-US”
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-locale="zh-CN">
<div>
10% of battery remaining
</div>
</div>
<script>
ej.mobile.Dialog.Locale['zh-CN'] = {
title: "标题",
leftButtonCaption: "取消",
rightButtonCaption: "继续"
};
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
ej.mobile.Dialog.Locale['zh-CN'] = {
title: "标题",
leftButtonCaption: "取消",
rightButtonCaption: "继续"
};
$("#alertdialog").ejmDialog({ locale: "zh-CN" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>mode enum
Specifies the Dialog mode to render. i.e. alert mode or confirm mode. See DialogMode
Default Value
- “alert”
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-mode="confirm">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ mode: "confirm" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>renderMode enum
Specifies the rendering mode of the control. See RenderMode
Default Value
- auto
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-rendermode="android">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ renderMode: "android" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>rightButtonCaption string
Specifies the text of right button for confirm mode Dialog.
NOTE
rightButtonCaption property only works for confirm mode Dialog. For confirm mode Dialog, set the property mode to “confirm”.
Default Value
- Continue
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-mode="confirm" data-ej-rightbuttoncaption="Ok">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ mode: "confirm", rightButtonCaption: "Ok" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>showButtons boolean
Specifies whether to show the buttons in the Dialog or not.
Default Value
- true
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-showbuttons="false">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ showButtons: false });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>showHeader boolean
Specifies whether to show the header in the Dialog or not.
Default Value
- true
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-showheader="false">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ showHeader: false });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>templateId string
Specifies ID of the element contains template contents.
Default Value
- null
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-templateid="dlgcontent">
</div>
<script id="dlgcontent" type="text/ng-template">
<div>
10% of battery remaining
</div>
</script>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
</div>
<script id="dlgcontent" type="text/ng-template">
<div>
10% of battery remaining
</div>
</script>
<script>
$(function () {
$("#alertdialog").ejmDialog({ templateId: "dlgcontent" });
});
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>title string
Specifies the title text.
Default Value
- null
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-title="Warning">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ title: "Warning" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>width string
Specifies the width of Dialog content.
Default Value
- true
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-width="400px">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ width: "400px" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>Methods
close()
To close the Dialog.
Example
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-leftbuttoncaption="Close Dialog" data-ej-buttontap="close">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function close() {
$("#alertdialog").ejmDialog("close");
}
</script>disableButton()
To disable buttons in Dialog control. It accepts a string parameter to denote which button should be disable. i.e. “left” or “right”. If no parameters passed, then this method will disable all buttons in Dialog.
Example
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog">
<div>
10% of battery remaining
<input data-role="ejmbutton" type="button" data-ej-text="Disable Button" data-ej-touchend="disable" />
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function disable() {
$("#alertdialog").ejmDialog("disableButton");
}
</script>enableButton()
To enable the disabled button in Dialog control. It accepts a string parameter to denote which button should be enable. i.e. “left” or “right”. If no parameters passed, then this method will enable all disabled buttons in Dialog.
Example
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog">
<div>
10% of battery remaining
<input data-role="ejmbutton" type="button" data-ej-text="Disable Button" data-ej-touchend="disable" />
<input data-role="ejmbutton" type="button" data-ej-text="Enable Button" data-ej-touchend="enable" />
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function disable() {
$("#alertdialog").ejmDialog("disableButton");
}
function enable() {
$("#alertdialog").ejmDialog("enableButton");
}
</script>open()
To open the Dialog
Example
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
</script>Events
beforeClose
Event triggers before Dialog window get closed.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object |
Event parameters from Dialog.
|
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-leftbuttoncaption="Close Dialog" data-ej-buttontap="closeDialog" data-ej-beforeclose="beforeClose">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function closeDialog() {
$("#alertdialog").ejmDialog("close");
}
function beforeClose(args) {
//handle the event
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ leftButtonCaption: "Close Dialog", buttonTap: "closeDialog", beforeClose: "beforeClose" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function closeDialog() {
$("#alertdialog").ejmDialog("close");
}
function beforeClose(args) {
//handle the event
}
</script>buttonTap
Event triggers when tap happens on the button.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object |
Event parameters from Dialog.
|
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-leftbuttoncaption="Close Dialog" data-ej-buttontap="closeDialog">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function closeDialog() {
//handle the event
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ buttonTap: "closeDialog" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function closeDialog() {
//handle the event
}
</script>close
Event triggers after Dialog window get closed.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object |
Event parameters from Dialog.
|
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-leftbuttoncaption="Close Dialog" data-ej-buttontap="closeDialog" data-ej-close="close">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function closeDialog() {
$("#alertdialog").ejmDialog("close");
}
function close(args) {
//handle the event
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ leftButtonCaption: "Close Dialog", buttonTap: "closeDialog", close: "close" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function closeDialog() {
$("#alertdialog").ejmDialog("close");
}
function close(args) {
//handle the event
}
</script>open
Event triggers after Dialog window get opened.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object |
Event parameters from Dialog.
|
Example
<!-- Unobtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog" data-role="ejmdialog" data-ej-open="open">
<div>
10% of battery remaining
</div>
</div>
<script>
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function open(args) {
//handle the event
}
</script><!-- Obtrusive way of rendering -->
<input data-role="ejmbutton" type="button" data-ej-text="Open Dialog" data-ej-touchend="openAlertDialog" />
<div id="alertdialog">
<div>
10% of battery remaining
</div>
</div>
<script>
$("#alertdialog").ejmDialog({ open: "open" });
function openAlertDialog() {
$("#alertdialog").ejmDialog("open");
}
function open(args) {
//handle the event
}
</script>