jQuery HappyR Dialog

This is a javascript dialog library. The HappyR Dialog depends on jQuery. It is built on Twitter Inc Bootstrap Modal. Some features of the HappyR Dialog:

  • responsive design
  • built for Ajax
  • highly configurable
  • we don't force you to write tons of code of your own

Please browse some of our examples and when you feel confident with the library you may want to have a look at the configuration.

Installation

The only thing you need to do is to import the jQuery library and then the HappyR Dialog library. It is highly recommended that you import some CSS as well.

<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="/css/happyr-dialog.min.css" />
</head>
<body>
    <a href="#myDialog" data-toggle="happyr-dialog">
        Open dialog
    </a>
    <div id="myDialog" style="display:none">
        <p>Dialog contents.</p>
    </div>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/js/happyr-dialog.min.js"></script>

    <!-- My other js stuff -->
    <script src="/js/common.js"></script>
</body>
</html>

Responsive design

To make sure the responsive design behaves as expected, please make sure that you have the viewport meta tag in you HTML head section.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- other stuff -->
</head>

Override default settings

The library has a quite a few settings and the defaults are not always suitable to you. There is two ways of to define settings: Globally and per dialog.

To change settings globally use the jQuery.extend

// js/common.js
$.happyrDialogSetDefaults({
    backdrop: "static",
    texts: {
        confirm:"Okey" ,
        title: "Awesome dialog"
    }
    });

To change settings per dialog use the 'data-happyr-dialog-settings' attribute on a DOM.

<a href="ajax.htm" data-toggle="happyr-dialog"
    data-happyr-dialog-settings="{backdrop: false, showFooter: false}" >
    Open dialog
</a>

Configuration

Properties

loaderImage(String) When you use Ajax to load your dialog, you may want to show a loader image. This property should contain the path to such image. You will find a loader image in src/images/loader.gif. Default value is undefined.showButtonHeaderClose(Boolean) Should we show the close button in the header or not? Default value is true.

Property name Description
ajaxCallback (Function or String) This value should be a function or a name of a function. The callback function is executed when some ajax content is loaded to the dialog. This is equivalent to listening on the ‘ajax-loaded’ event. The callback function may take the jQuery object for the dialog container as parameter. Default value is undefined.
animate (Boolean) Set this value to true for animated show and hide methods. Default value is true.
animation animation(Object) You may configure the animation. Set the duration and the opacity level on the backdrop. In the code snippet below you will see the default values.


animation: {
        timeBackdropShow: 200,
        timeBackdropHide: 200,
        timeDialogShow: 300,
        timeDialogHide: 300,
        opacityBackdrop: 0.8
    }

backdrop (Boolean or String) Set this value to true for a dark background for the dialog. Set this value to static to disable the dialog to close when you are clicking on the backdrop. This force the users to press the close button. Default value is true.
closeCallback (Function or String) This value should be a function or a name of a function. The callback function is executed when the close button is pressed. It is not called when the dialog closes due keypress. The callback function may take the jQuery object for the dialog container as parameter. Default value is undefined
confirmCallback (Function or String) This value should be a function or a name of a function. The callback function is executed when the confirm button is pressed. The callback function may take the jQuery object for the dialog container as parameter. Default value is undefined
enforceFocus (Boolean) Should we force that the focus stays within the dialog. This should be disabled when you want to focus on overlays that uses a DOM outside the dialog. Like the Select2 library. Default value is true.
getFormResultInDialog (Boolean) Should we show the result after a form submission in the dialog? If this value is false the page will refresh (like a normal form submission). Default value is true.
hideAfterFormSubmit (Boolean) Should we hide after a form in the dialog is submitted? Default value is false.
keyboard (Boolean) Should you be able to close tje dialog with the keyboard esc key. Default value is true.
remote (String) This is the path or url to where the content of the dialog is stored. Use this property to get a Ajax dialog. Default value is undefined.
show (Boolean) If the this property is set to true the dialog will open directly. Default value is true.
showButtonClose (Boolean) Should we show the footer or not? Default value is true.
showButtonConfirm (Boolean) Should we show a confirm button in the footer or not? Default value is true.
showFooter (Boolean) Should we show the footer or not? Default value is true.
showHeader (Boolean) Should we show the header or not? Default value is true.
showTitle (Boolean) Should we show a title or not? Default value is true.
submitFormOnConfirm (Boolean) If there is a form in the dialog. Should the form be submitted when the user press the confirm button? Default value is true.
texts (Object) In this object you may put title texts and labels to the buttons. Valid keys are close, confirm and title
validateFormResponse (function) The dialog will close after pressing the confirm if hideAfterFormSubmit is true and this functions returns true. The point of this function is that you may verify the response form the server before you close the dialog. This is good for error detection. The default value is a function that returns true.

Methods

There are some methods you may run on the dialog.

// /js/common.js

$("#myDialog").happyrDialog("show");

Method name Description
enforceFocus  Put the focus on the dialog
hide Hide the dialog.
show Show the dialog.
toggle Toggle between show and hide.

Global Events

These events is bounded to the document.


$(document).on('happyr-dialog-confirm', function(e){
    alert("Someone pressed the confirm button");
});

Event name Description
happyr-dialog-close This event is triggered every time the dialog is closed.
happyr-dialog-confirm This event is triggered when somebody clicks on the confirm button.
happyr-dialog-shown This event is triggered when a dialog is shown.

Private Events


$("#dialog1").on('shown', function(e){
    alert("Dialog 1 is shown");
});

Event name Description
ajax-loaded This event is triggered when the ajax content is loaded.
hidden This event is triggered when the dialog is hidden.
shown This event is triggered when the dialog is shown.

Source

The source code is hosted on GitHub.