happyr/happyr-dialog

A nice javascript library that helps you to show dialogs.

Thursday, July 10, 2014
by Nyholm
Repository
1 Watchers
0 Stars
101 Installations

JavaScript
0 Dependents
0 Suggesters
0 Forks
0 Open issues
17 Versions
0 % Grown

The README.md

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:, _(*1)

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., _(*2)

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., _(*3)

<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., _(*4)

<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., _(*5)

To change settings globally use the jQuery.extend, _(*6)

// 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., _(*7)

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

The Versions

10/07 2014

dev-master

9999999-dev http://developer.happyr.com/libraries/jquery-happyr-dialog

A nice javascript library that helps you to show dialogs.

js-library happyr-dialog

A nice javascript library that helps you to show dialogs.

happyr/happyr-dialog

The README.md

HappyR Dialog

Installation

Responsive design

Override default settings

The Versions

dev-master

by Tobias Nyholm

1.3.10

by Tobias Nyholm

1.3.9

by Tobias Nyholm

1.3.8

by Tobias Nyholm

1.3.7

by Tobias Nyholm

1.3.6

by Tobias Nyholm

1.3.5

by Tobias Nyholm

1.3.4

by Tobias Nyholm

1.3.3

by Tobias Nyholm

1.3.2

by Tobias Nyholm

1.3.1

by Tobias Nyholm

1.3.0

by Tobias Nyholm

1.2.2

by Tobias Nyholm

1.2.1

by Tobias Nyholm

1.2.0

by Tobias Nyholm

1.1.0

by Tobias Nyholm

1.0.0

by Tobias Nyholm