ejWaitingPopup

The WaitingPopup control for JavaScript is a visual element that provides support for displaying a pop-up indicator over a target area and preventing the end user’s interaction with the target area while loading.

Syntax

  • javascript
  • $(element).ejWaitingPopup()

    Example

  • html
  • <div id="target"></div>
    <script>
    // Simple waiting popup creation.
    $("#target").ejWaitingPopup({ showOnInit: true });
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    Requires

    • module:jQuery

    • module:jquery.easing.1.3.js

    • module:ej.core.js

    • module:ej.waitingpopup.js

    Members

    cssClass string

    Sets the root class for the WaitingPopup control theme

    Default Value

    • null

    Example

  • html
  • <div id="target"></div>
    <script>
    //To Initialize the WaitingPopup with the cssClass  value specified. 
            $("#target").ejWaitingPopup({showOnInit: true, cssClass : 'gradient-lime '});
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    htmlAttributes object

    Specifies the list of HTML attributes to be added to waitingpopup control.

    Default Value

    • {}

    Example

  • html
  • <div id="target"></div>
    <script>
    //To set htmlAttributes API value during initialization. 
            $("#target").ejWaitingPopup({showOnInit: true, htmlAttributes:{"aria-label":"waitingpopup"} });
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    showImage boolean

    Enables or disables the default loading icon.

    Default Value

    • true

    Example

  • html
  • <div id="target"></div>
    <script>
    //To set showImage API value during initialization  
            $("#target").ejWaitingPopup({ showOnInit: true, showImage: false});
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    showOnInit boolean

    Enables the visibility of the WaitingPopup control

    Default Value

    • false

    Example

  • html
  • <div id="target"></div>
    <script>
    //To set showOnInit API value during initialization  
            $("#target").ejWaitingPopup({ showOnInit: true});
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    target string

    Specified a selector for elements, within the container.

    Default Value

    • null

    Example

  • html
  • <div id="waiting"></div>
    <script>
    //To set target API value during initialization  
            $("#waiting").ejWaitingPopup({ showOnInit: true,target: "body"});
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    appendTo string

    Waitingpopup element append to given container element.

    Default Value

    • null

    Example

  • html
  • <div id="waiting"></div>
    <script>
    //To set target API value during initialization  
            $("#waiting").ejWaitingPopup({ showOnInit: true,appendTo: "body"});
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    template object

    Loads HTML content inside the popup panel instead of the default icon

    Default Value

    • null

    Example

  • html
  • <div id="content">
      <div class="block">
      <div class="logo">
    </div>
       <div class="text">
        <p> Content is loading ... </p>
         </div>
                </div>
    <div class="loader">
    </div>
    </div>
    <script>
    //To Initialize the WaitingPopup control with the template value specified.
            $("#target").ejWaitingPopup({ showOnInit: true,template: $('#content') });
    </script>
    <style>
             
              .block {
                height: 76px;
            }
    
            .logo {
                background-image: url("themes/images/waitingpopup/js_logo.png");
                float: left;
                height: 100%;
                width: 77px;
                margin-right: 15px;
            }
    
            .txt {
                float: left;
                font-size: 17px;
                height: 100%;
                text-align: left;
            }
    
                .txt p {
                    margin: 0;
                }
    
            .loader {
                background: url("themes/images/waitingpopup/load_light.gif") no-repeat scroll -5px 18px transparent;
                height: 40px;
                width: 100%;
            }
    
            .darktheme .loader {
                background-image: url("themes/images/waitingpopup/load_dark.gif");
            }
    
            #content {
                cursor: default;
                height: 112px;
                width: 275px;
            }
    </style>

    text string

    Sets the custom text in the pop-up panel to notify the waiting process

    Default Value

    • null

    Example

  • html
  • <div id="target"></div>
    <script>
    //To Initialize the WaitingPopup with the text value specified
            $("#target").ejWaitingPopup({showOnInit: true, text: 'waiting&hellip;' });
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    Methods

    hide()

    To hide the waiting popup

    Example

  • html
  • <div id="target"></div>
    <script>
    $("#target").ejWaitingPopup({showOnInit: true});
    // Initialize the WaitingPopup object.
      var popupObj = $("#target").data("ejWaitingPopup");
    // Calls the hide method of WaitingPopup not to display.
    popupObj.hide();
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>
  • html
  • <div id="target"></div>
    <script>
    $("#target").ejWaitingPopup({showOnInit: true});
    // hide WaitingPopup using the hide method.
    $("#target").ejWaitingPopup('hide');
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    refresh()

    Refreshes the WaitingPopup control by resetting the pop-up panel position and content position

    Example

  • html
  • <div id="target"></div>
    <script>
    $("#target").ejWaitingPopup({showOnInit: true});
    // Initialize the WaitingPopup object.
      var popupObj = $("#target").data("ejWaitingPopup");
    popupObj.refresh();
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>
  • html
  • <div id="target"></div>
    <script>
    $("#target").ejWaitingPopup({showOnInit: true});
    // Refresh the WaitingPopup using refresh method.
    $("#target").ejWaitingPopup('refresh');
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    show()

    To show the waiting popup

    Example

  • html
  • <div id="target"></div>
    <script>
    $("#target").ejWaitingPopup({showOnInit: true});
    // Initialize the WaitingPopup object.
      var popupObj = $("#target").data("ejWaitingPopup");
    // Calls the show method of WaitingPopup to display.
    popupObj.show();
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>
  • html
  • <div id="target"></div>
    <script>
    $("#target").ejWaitingPopup({showOnInit: true});
    // Display WaitingPopup using the show method.
    $("#target").ejWaitingPopup("show");
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    Events

    create

    Fires after Create WaitingPopup successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the WaitingPopup model
    type string returns the name of the event

    Example

  • html
  • <div id="target"></div>
    <script>
    //To Initialize the WaitingPopup with the text value specified with create event
            $("#target").ejWaitingPopup({showOnInit: true, text: 'waiting&hellip;',create: function (args) {} });
    </script>
    <style>
                  #target {
                height: 200px;
                width: 600px;
                margin: 0 auto;
            }
    
           #target_WaitingPopup .e-image {
                display: block;
                height: 70px;
            }
    </style>

    destroy

    Fires after Destroy WaitingPopup successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the WaitingPopup model
    type string returns the name of the event

    Example

  • html
  • <div id="target"></div>
    <script>
    //To Initialize the WaitingPopup with the text value specified with destroy event
            $("#target").ejWaitingPopup({showOnInit: true, text: 'waiting&hellip;',destroy: function (args) {} });
    </script>
    <style>
                #target {
              height: 200px;
              width: 600px;
              margin: 0 auto;
          }
    
         #target_WaitingPopup .e-image {
              display: block;
              height: 70px;
          }
    </style>