happyr / happyr-dialog
A nice javascript library that helps you to show dialogs.
Installs: 107
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Language:JavaScript
Type:js-library
README
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>