ejmDialog

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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    title string Returns the title of the Dialog.

    Example

  • html
  • <!-- 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>
  • html
  • <!-- 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.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    text Object Returns the text of the button.

    Example

  • html
  • <!-- 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>
  • html
  • <!-- 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.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    title string Returns the title of the Dialog.

    Example

  • html
  • <!-- 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>
  • html
  • <!-- 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.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    title string Returns the title of the Dialog.

    Example

  • html
  • <!-- 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>
  • html
  • <!-- 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>