happyr/happyr-dialog

A nice javascript library that helps you to show dialogs.

Maintainers

Details

github.com/Happyr/HappyR-Dialog

Homepage

Source

Issues

Installs: 107

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 0

Open Issues: 0

Language:JavaScript

Type:js-library

1.3.10 2014-04-03 07:56 UTC

MIT 7ac74c7444d68442e4029f792d0725388c534664

  • Tobias Nyholm <tobias.woop@happyrecruiting.se>

dialog

This package is auto-updated.

Last update: 2024-10-25 06:27:45 UTC

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>