A nice javascript library that helps you to show dialogs.

Installs: 95

Dependents: 0

Watchers: 2

Language: JavaScript

Type: js-library

1.3.10 2014-04-03 07:56 UTC


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.


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.

    <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" />
    <a href="#myDialog" data-toggle="happyr-dialog">
        Open dialog
    <div id="myDialog" style="display:none">
        <p>Dialog contents.</p>

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

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.

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

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